adsPlace_1

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

Hosting Ukraine

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

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