Простая галерея на 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 Обновил архив. Теперь изображения занимают всю ширину контейнера.