Симпатичная галерея для сайта за 20 минут на javascript

Дата публикации: 2012-10-19

Симпатичная галерея для сайта за 20 минут

От автора: в этом несложном практическом уроке мы с Вами за короткое время создадим простую, но вместе с тем симпатичную галерею, которая замечательно будет смотреться на сайте. Итак, приступим.

Для показа мы воспользуемся бесплатным шаблоном, в котором создадим еще одну страницу под нашу галерею. Сразу стоит отметить, что задача, которую мы решим в уроке, на самом деле может быть выполнена средствами PHP гораздо менее рутинно… но это уже тема отдельного урока.

Все картинки галереи я поместил в каталог /gallery_img/. Картинки разделены по двум папкам в этом каталоге — это папки /big/ и /small/. Полагаю, Вы уже догадались, что в этих папках хранятся картинки оригинальных размеров и миниатюры. При этом все миниатюры имеют одинаковые размеры — 150 пикселей ширины и 100 пикселей высоты. Одинаковые размеры использованы для того, чтобы миниатюры ровно и красиво располагались на странице. Таким образом, миниатюра и картинка оригинальных размеров составляют комплект одного изображения — миниатюра выводится на страницу, а по клику по ней показывается большая картинка.

Создадим на странице блок с классом gallery — в этом блоке будут располагаться миниатюры:

<div class="gallery">
	<!-- Здесь миниатюры -->
</div>

</div>

Теперь добавим картинок в этот блок. Все картинки я выводить здесь не буду, покажу лишь парочку — оставшиеся выводятся аналогично:

<div class="gallery">
	<a rel="gallery" class="photo" href="gallery_img/big/01.jpg" title="Картинка 1"><img src="gallery_img/small/01.jpg" width="150" height="100" alt="" /></a>
	<a rel="gallery" class="photo" href="gallery_img/big/02.jpg" title="Картинка 2"><img src="gallery_img/small/02.jpg" width="150" height="100" alt="" /></a>
</div>

</div>

Как мы видим, картинки помещены в ссылку, которая указывает на большую картинку. Также каждая ссылка имеет класс photo и атрибут rel со значением gallery (далее Вы поймете, для чего нужен этот атрибут). Таким же образом добавляем оставшиеся картинки, изменяя лишь пути к миниатюрам и большим фото. В итоге мы получили некое подобие галереи… пока, правда, не очень симпатичной:

Давайте добавим для галереи несколько стилевых правил, чтобы «оживить» ее и сделать более привлекательной. Откроем файл стилей и добавим 2 правила (я их прокомментировал):

/* Gallery */
.gallery img{
	margin:5px; /* внешние отступы картинок */
	border:3px solid #fff; /* рамка картинок */
}
a.photo:hover img{
	border:3px solid #034F80; /* изменение цвета рамки при наведении на картинку */
}

/* Gallery */

.gallery img{

margin:5px; /* внешние отступы картинок */

border:3px solid #fff; /* рамка картинок */

}

a.photo:hover img{

border:3px solid #034F80; /* изменение цвета рамки при наведении на картинку */

}

Вот теперь наша галерея выглядит «живой» и привлекательной:

Осталось только добиться того, чтобы показ большой картинки производился в модальном окне. Для этого воспользуемся любым понравившимся Вам скриптом «а-ля Lightbox». Мне в этом плане симпатичен Fancybox. Описание и документацию к нему Вы сможете найти на офсайте — //fancybox.net.

Скачиваем архив, распаковываем и подключаем необходимые скрипты и стили к нашей странице. Для нашего сайта я создам отдельный каталог под скрипты — /scripts/. Туда скопируем файл с библиотекой jQuery (ее можно взять из архива Fancybox или на офсайте). Также в каталог /scripts/ поместим полностью папку fancybox со всем содержимым (скрипты, стили, картинки). Подключаем все это добро между тегами head:

<script type="text/javascript" src="./scripts/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./scripts/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

Осталось лишь написать небольшой код jQuery, чтобы наша галерея полноценно заработала. Необходимо отобрать ссылки, для которых будет открываться модальное окно, как Вы помните, — это ссылки с классом photo. Ну и для отобранных ссылок вызывается метод fancybox()… вот и все — ничего сложного:

$(document).ready(function(){
	$("a.photo").fancybox();
});

$(document).ready(function(){

$("a.photo").fancybox();

});

Теперь большие картинки открываются в модальном окне — симпатично, не правда ли? 🙂 Кстати, открыв картинку, мы можем, не закрывая ее, перейти к следующему или предыдущему изображению. Эту возможность как раз и обеспечивает атрибут rel, который мы присвоили ссылкам галереи. Одинаковое значение (оно может быть любым) атрибута связывает ссылки в одну группу.

Также Вы можете поиграться с настройками галереи, воспользовавшись документацией на сайте Fancybox. У меня в итоге были установлены следующие настройки:

$(document).ready(function(){
	$("a.photo").fancybox({
		transitionIn: 'elastic',
		transitionOut: 'elastic',
		speedIn: 500,
		speedOut: 500,
		hideOnOverlayClick: false,
		titlePosition: 'over'
	});
});