adsPlace_1

Войти или Зарегистрироваться

adsPlace_3

Простая галерея на 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)

    1. Аватар пользователя Александр

      Александр

      14:53 24.04.2012

      а как выравнять картинку по центру блока (вертикаль, горизонталь)? Если она меньше блока.

      ответить
      • Аватар пользователя Максим Никифоров

        Максим Никифоров

        16:18 24.04.2012

        Добрый день, Александр!
        На данный момент выровнять картинку нельзя, так как она позиционируется абсолютно. В файле стилей прописал для изображения width 100%. Свойство растянет изображение под ширину блока. Скопируйте новый файл css.

        ответить
        • Аватар пользователя Александр

          Александр

          12:18 27.04.2012

          Спасибо. Но в таком случае фотографии будут терять в качестве ((. Пришлось ужимать все фото под стандарт.

          ответить
          • Аватар пользователя Максим Никифоров

            Максим Никифоров

            12:23 27.04.2012

            Думаю, что на выходных посмотрю, что можно будет сделать. Смотрите обновление поста с понедельника.
            UPD Обновил архив. Теперь изображения занимают всю ширину контейнера.

            ответить
    2. Аватар пользователя Nicolson

      Nicolson

      11:00 05.09.2012

      Подскажите, как разместить 3 или 4 галереи на одной страничке?

      ответить
      • Аватар пользователя Максим Никифоров

        Сделайте несколько блоков html как показано в примере (но вместо id присвойте им клас). В функции вызова js пропишите $(‘.ВАШ_КЛАС’).prettygallery()
        и всё.

        ответить
        • Аватар пользователя Nicolson

          Nicolson

          10:42 06.09.2012

          А можно подробнее, как присвоить класс блоку?

          ответить
          • Аватар пользователя Максим Никифоров

            Пример кода:

            <div class="gallery">
            </div>
            <div class="gallery">
            </div>
            <div class="gallery">
            </div>
            <script type="text/javascript">
            	$(function(){
            		$('div.gallery').prettygallery();
            	});
            </script>
            
            ответить
    3. Аватар пользователя Nicolson

      Nicolson

      10:57 06.09.2012

      Я так и делал. Проблема в том, что после последнего фото текущей галереи открывается первое фото следующей галереи

      ответить
      • Аватар пользователя Максим Никифоров

        Посмотрите обновленный комментарий и демо. Проблема только есть с кнопками «Вперед» и «Назад». Навигация под слайдером работает. С кнопками разберусь сегодня.

        ответить
        • Аватар пользователя Nicolson

          Nicolson

          13:27 06.09.2012

          Спасибо. Регистрируюсь на Вашем сайте.

          ответить
          • Аватар пользователя Максим Никифоров

            Демо поправил. Все уже работает. Попробуйте этот код:

            <div class="wrapper">
                    <div class="gallery">	
                    </div> 
            </div>
            <div class="wrapper">
                    <div class="gallery">	
                    </div> 
            </div>
            <div class="wrapper">
                    <div class="gallery">	
                    </div> 
            </div>
            <script type="text/javascript">
            	$(function(){
            		$('div.gallery').prettygallery();
            	});
            </script>
            

            Перекачайте исходники

            ответить
    4. Аватар пользователя Евгений

      Евгений

      12:36 23.08.2013

      Уважаемые коллеги! Подскажите, пожалуйста, как сделать так, чтобы слайды прокручивались автоматически.
      Спасибо заранее!

      ответить
      • Аватар пользователя Никифоров Максим

        Евгений, вставьте код после обработки события next.click

        setInterval(function() {
            var index = buttons.find('span').filter('.active').index();
                    if (images_count - 1 != index){
                        index++;
                    }else{
                        index = 0;
                    }
                    slide_image(index);
        }, 200);
        
        ответить

    Оставь свой отзыв

    Для вставки кода используйте кнопки php, html, javascript, css, sql

    * - поля обязательны к заполнению