От автора: в этом несложном практическом уроке мы с Вами за короткое время создадим простую, но вместе с тем симпатичную галерею, которая замечательно будет смотреться на сайте. Итак, приступим.
Для показа мы воспользуемся бесплатным шаблоном, в котором создадим еще одну страницу под нашу галерею. Сразу стоит отметить, что задача, которую мы решим в уроке, на самом деле может быть выполнена средствами PHP гораздо менее рутинно… но это уже тема отдельного урока.
Все картинки галереи я поместил в каталог /gallery_img/. Картинки разделены по двум папкам в этом каталоге — это папки /big/ и /small/. Полагаю, Вы уже догадались, что в этих папках хранятся картинки оригинальных размеров и миниатюры. При этом все миниатюры имеют одинаковые размеры — 150 пикселей ширины и 100 пикселей высоты. Одинаковые размеры использованы для того, чтобы миниатюры ровно и красиво располагались на странице. Таким образом, миниатюра и картинка оригинальных размеров составляют комплект одного изображения — миниатюра выводится на страницу, а по клику по ней показывается большая картинка.
Создадим на странице блок с классом gallery — в этом блоке будут располагаться миниатюры:
1 2 3 |
<div class="gallery"> <!-- Здесь миниатюры --> </div> |
Теперь добавим картинок в этот блок. Все картинки я выводить здесь не буду, покажу лишь парочку — оставшиеся выводятся аналогично:
1 2 3 4 |
<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> |
Как мы видим, картинки помещены в ссылку, которая указывает на большую картинку. Также каждая ссылка имеет класс photo и атрибут rel со значением gallery (далее Вы поймете, для чего нужен этот атрибут). Таким же образом добавляем оставшиеся картинки, изменяя лишь пути к миниатюрам и большим фото. В итоге мы получили некое подобие галереи… пока, правда, не очень симпатичной:
Давайте добавим для галереи несколько стилевых правил, чтобы «оживить» ее и сделать более привлекательной. Откроем файл стилей и добавим 2 правила (я их прокомментировал):
1 2 3 4 5 6 7 8 |
/* 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:
1 2 3 4 |
<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()… вот и все — ничего сложного:
1 2 3 |
$(document).ready(function(){ $("a.photo").fancybox(); }); |
Теперь большие картинки открываются в модальном окне — симпатично, не правда ли? 🙂 Кстати, открыв картинку, мы можем, не закрывая ее, перейти к следующему или предыдущему изображению. Эту возможность как раз и обеспечивает атрибут rel, который мы присвоили ссылкам галереи. Одинаковое значение (оно может быть любым) атрибута связывает ссылки в одну группу.
Также Вы можете поиграться с настройками галереи, воспользовавшись документацией на сайте Fancybox. У меня в итоге были установлены следующие настройки:
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function(){ $("a.photo").fancybox({ transitionIn: 'elastic', transitionOut: 'elastic', speedIn: 500, speedOut: 500, hideOnOverlayClick: false, titlePosition: 'over' }); }); |
На этом наша галерея на javascript закончена. Надеюсь, что этот небольшой урок Вам понравился и будет полезен. Успехов Вам!
Комментарии (65)