Простая галерея на jQuery Pretty Gallery
Сегодня поговорим об простых галереях.
Все чаще возникает необходимость поставить галерею на сайт для отображения своего портфолио или для презентации продукции и т.д. Но не всегда нам подходят массивные скрипты которые дают нам необьятные функции. Иногда нам подошла бы простая галерея с минимальными возможностями для отображения наших задач.
Предлагаю к Вашему рассмотрению простую галерею Pretty Gallery с приятным дизайном и маленьким весом.
Для работы плагина, нужно подключить библиотеки jQuery и jQueryUI.
Вставляем код между тегами <head></head>
//Подключаем jQuery <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> //Подключаем jQuery UI <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> //Подключаем плагин Pretty Gallery <script type="text/javascript" src="jquery.prettygallery.js"></script>
Html зарметка должа иметь вид:
<div id="pretty_gallery"> <img src="img/image1.jpg" title="Описание изображения 1" alt="Описание изображения 1"/> <img src="img/image2.jpg" title="Описание изображения 2" alt="Описание изображения 2"/> <img src="img/image3.jpg" title="Описание изображения 3" alt="Описание изображения 3"/> </div>
В css файле прописываем стили для элементов
// Стиль самого блока галереи #pretty_gallery .pg_block{ position: relative; border: 15px solid white; overflow: hidden; height: 300px; width: 450px; background: url('img/loader.gif') no-repeat center center white; -webkit-box-shadow:0 3px 5px #999; -moz-box-shadow:0 3px 5px #999; box-shadow:0 3px 5px #999; } #pretty_gallery .pg_block img{ width:100%; position: absolute; top: 0px; left: 0px; } #pretty_gallery .pg_post{ position: absolute; left: 0px; bottom: 0px; width: 100%; padding: 10px 10px 20px 10px; color: white; background: rgba(0,0,0,0.6); font-family: Verdana; font-size: 14px; } #pretty_gallery .pg_prev_button, .pg_next_button{ position: absolute; display: block; width: 59px; height: 60px; top: 130px; cursor: pointer; } #pretty_gallery .pg_prev_button{ left: -14px; background: url('img/prev_button.png') top left; } #pretty_gallery .pg_next_button{ right: -14px; background: url('img/next_button.png') top left; } #pretty_gallery .pg_prev_button:hover{ background: url('img/prev_button_a.png') top left; } #pretty_gallery .pg_next_button:hover{ background: url('img/next_button_a.png') top left; } #pretty_gallery .pg_buttons{ height: 13px; padding-top: 15px; text-align: center; } #pretty_gallery .pg_buttons span{ display: inline-block; width: 13px; height: 13px; margin: 0px 4px; cursor: pointer; background: url('img/sliderbutton.png') top left; } #pretty_gallery .pg_buttons span.active{ background: url('img/sliderbutton_a.png') top left; }
Осталось задать галерее поле для действий. Вставьте код в конец между тегами <head></head>
<script type="text/javascript"> $(function(){ $('#pretty_gallery').prettygallery(); }); </script>
Все готово! Если Вас не удовлетворяет стиль, смело меняйте. Вот исходный код скрипта с комментариями:
/*! * PrettyGallery Plugin * https://phpdes.com * * author: Maxim Nikifrov */ (function ($) { $.fn.prettygallery = function () { return this.each(function () { var obj = $(this); images_count = obj.find('img').length; obj.append('<div class="pg_block"></div>'); obj.find('.pg_block').append(obj.find('img')).append('<div class="pg_post"></div>'); obj.append('<div class="pg_buttons"></div><span class="pg_prev_button"></span><span class="pg_next_button"></span>'); for (i = 0; i < images_count; i++){ obj.find('.pg_buttons').append('<span></span>'); } var block = obj.find('.pg_block'); var post = obj.find('.pg_post'); var buttons = obj.find('.pg_buttons'); var next = obj.find('.pg_next_button'); var prev = obj.find('.pg_prev_button'); var images = block.find('img'); var toggle_buttons = buttons.find('span'); block.find('img:not(:first-child)').css({opacity : 0}); buttons.find('span:first-child').addClass('active'); post.text(block.find('img:visible').attr('title')); function slide_image (index){ toggle_buttons.removeClass('active'); toggle_buttons.eq(index).addClass('active'); images.not(':eq('+index+')').animate({opacity : 0 },500); images.eq(index).animate({opacity : 1 },500); post.hide('slide',{direction:'down'},200,function(){ $(this).text(images.eq(index).attr('title')).show('slide',{direction:'down'},700); }); } toggle_buttons.click(function(){ var index = $(this).index(); slide_image(index); }); prev.click(function(){ var index = buttons.find('span').filter('.active').index(); if (index != 0){ index--; }else{ index = images_count - 1; } slide_image(index); }) next.click(function(){ var index = buttons.find('span').filter('.active').index(); if (images_count - 1 != index){ index++; }else{ index = 0; } slide_image(index); }) }); }; })(jQuery);
Александр
14:53 24.04.2012а как выравнять картинку по центру блока (вертикаль, горизонталь)? Если она меньше блока.
Максим Никифоров
16:18 24.04.2012Добрый день, Александр!
На данный момент выровнять картинку нельзя, так как она позиционируется абсолютно. В файле стилей прописал для изображения width 100%. Свойство растянет изображение под ширину блока. Скопируйте новый файл css.
Александр
12:18 27.04.2012Спасибо. Но в таком случае фотографии будут терять в качестве ((. Пришлось ужимать все фото под стандарт.
Максим Никифоров
12:23 27.04.2012Думаю, что на выходных посмотрю, что можно будет сделать. Смотрите обновление поста с понедельника.
UPD Обновил архив. Теперь изображения занимают всю ширину контейнера.