Галерея изображений в стиле Google Images

Здравствуйте, уважаемые читатели XoZblogа! В этой статье поведаю Вам о замечательной галереи изображений в стиле google images, автором которой является @toddmotto. Галерея SuperBox достаточно «легковесная», да к тому же адаптирована под мобильные устройства. Работает исключительно на CSS3 и jQuery, как говорится ничего лишнего.

HTML разметка

Разметка очень аккуратная и опрятная, каждое изображение «обернуто» в DIV для удобства позиционирования. Один блок будет выглядеть следующим образом:

<div class="superbox-list">
    <img src="img/superbox/superbox-thumb-1.jpg" data-img="img/superbox/superbox-full-1.jpg" alt="" class="superbox-img">
</div>

По умолчанию display:inline-block; создает разрыв между элементами. Для того, чтобы искоренить это, мы можем добавить между элементами галереи, HTML комментарии, что вполне приемлемо:

<div class="superbox-list">
    <img src="img/superbox/superbox-thumb-1.jpg" data-img="img/superbox/superbox-full-1.jpg" alt="" class="superbox-img">
</div><!--
--><div class="superbox-list">
    <img src="img/superbox/superbox-thumb-2.jpg" data-img="img/superbox/superbox-full-2.jpg" alt="" class="superbox-img">
</div><!--
--><div class="superbox-list">
    <img src="img/superbox/superbox-thumb-3.jpg" data-img="img/superbox/superbox-full-3.jpg" alt="" class="superbox-img">
</div>

Возможно Вы заметили атрибут data-img — SuperBox извлекает из него путь до оригинального изображения, в то время как в src путь до уменьшенной копии.

Галерея изображений - SupreBox

CSS

Теперь пару слов о CSS. Базовым является описание стиля дивов с изображением. Делаем блок обтекаемым другими элементами, фиксим для IE7 (*display:inline;) и задает относительную ширину:

.superbox-list {
    display:inline-block;
    *display:inline;
    zoom:1;
    width:12.5%;
}

Каждое изображение использует 100% от ширины div, таким образом заполняя его полностью. Также приведу стиль для блока с раскрытым изображением:

.superbox-show {
   text-align:center;
   position:relative;
   background:#333;
   box-shadow:inset 0 1px 5px #111;
   -webkit-box-shadow:inset 0 1px 5px #111;
   -moz-box-shadow:inset 0 1px 5px #111;
   width:100%;
   float:left;
   padding:25px;
   display:none;
}

Ширина на весь экран, выравнивание содержимого по центру и некоторые украшательства. А также по-умолчанию скрываем блок, показывать его будет средствами jQuery.

jQuery

Думаю с JQuery проблем не должно возникнуть. Используются простые и понятные приемы, можно сказать что SuperBox хороший плагин.

;(function($) {
   
    // Создаем новый метод SuperBox
    $.fn.SuperBox = function(options) {
     
    // Объявляем переменные
    var superbox      = $('<div class="superbox-show"></div>');
    var superboximg   = $('<img src="" class="superbox-current-img">');
    var superboxclose = $('<div class="superbox-close"></div>');
     
    // Соединяем их в один div
    superbox.append(superboximg).append(superboxclose);
     
    // Для каждого вызова
    return this.each(function() {
         
        // При клике по изображению
        $('.superbox-list').click(function() {
                     
            // Получаем путь до оригинальной картинки
            var currentimg = $(this).find('.superbox-img');
            var imgData = currentimg.data('img');
            superboximg.attr('src', imgData);

            // Работаем с видимостью картинки
            if($('.superbox-current-img').css('opacity') == 0) {
                $('.superbox-current-img').animate({opacity: 1});
            }
           
            // Проверяем. Если клик по уже открытой картинке, то закрываем просмотр
            // иначе блок с оригинальной картинкой помещаем сразу после миниатюры
            if ($(this).next().hasClass('superbox-show')) {
                superbox.toggle();
            } else {
                superbox.insertAfter(this).css('display', 'block');
            }
           
            // Прокручиваем страницу так, чтобы выбранное изображение было видно полностью
            $('html, body').animate({
                scrollTop:superbox.position().top - currentimg.width()
            }, 'medium');
         
        });
         
        // При клике по "крестику" скрываем все       
        $('.superbox').on('click', '.superbox-close', function() {
            $('.superbox-current-img').animate({opacity: 0}, 200, function() {
                $('.superbox-show').slideUp();
            });
        });    
    });
};
})(jQuery);

Метод описан, остается вызвать его:

$(function() {
    $('.superbox').SuperBox();
});

SuperBox работает на всех современных браузерах + IE8, IE9 и IE10. В IE7 не корректное отображение элементов.

Автор собирается продолжать доработку плагина SuperBox, поэтому ждет предложений по дальнейшему его усовершенствованию. Оставить комментарий можно на странице с оригинальной статьей ссылка ниже.

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!