Галерея изображений в стиле Google Images | XoZblog - Уроки и статьи по созданию сайта, блога

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

HTML разметка

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

1
2
3

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

1
2
3
4
5
6
7
8
9

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

CSS

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

1
2
3
4
5
6

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

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

1
2
3
4
5
6
7
8
9
10
11
12

.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 хороший плагин.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

;(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);

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

1
2
3

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

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

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

Источник статьи/урока: https://xozblog.ru

По материалам: http://toddmotto.com/introducing-superbox-the-reimagined-lightbox-gallery/

Правила перепечатки

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

Просмотр демо страницы и скачивание исходников не доступно

HTML разметка

CSS

jQuery