В этой статье вы узнаете как организовать простую галерею изображений. В этом нам поможет отлично зарекомендовавший себя инструмент FancyBox.
Подробнее обо всех функциях FancyBox можно прочитать на официальном сайте.
Итак, приступим.
Для примера возьмем три картинки. Наш код имеет вид:
<a href="image_big1.jpg"><img src="image_small1.jpg" alt="" /></a> <a href="image_big2.jpg"><img src="image_small2.jpg" alt="" /></a> <a href="image_big3.jpg"><img src="image_small3.jpg" alt="" /></a>
Шаг 1. Скачиваем библиотеку FancyBox с официального сайта и загружаем ее себе на сайт в каталог fancybox.
Шаг 2. Подключаем ее в head нашего сайта:
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Не забываем, что у нас должна быть прежде подключена библиотека JQuery, например, так:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Шаг 3. Подключаем таблицу стилей fancybox:
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Шаг 4. Добавляем нашим ссылкам id:
<a id="fb" href="image_big1.jpg"><img src="image_small1.jpg" alt="" /></a> <a id="fb" href="image_big2.jpg"><img src="image_small2.jpg" alt="" /></a> <a id="fb" href="image_big3.jpg"><img src="image_small3.jpg" alt="" /></a>
Шаг 5. Организуем селектор:
<script type="text/javascript"> $(function() { $('a#fb').fancybox(); }); </script>
Можно уже смотреть, что у нас получилось:) Заметили? наши картинки открываются в отдельном всплывающем окне, но они не организуют пока что галерею:( исправим это!
Шаг 6. Добавляем нашим ссылкам тег rel=»group»:
<a id="fb" href="image_big1.jpg" rel="group"><img src="image_small1.jpg" alt="" /></a> <a id="fb" href="image_big2.jpg" rel="group"><img src="image_small2.jpg" alt="" /></a> <a id="fb" href="image_big3.jpg" rel="group"><img src="image_small3.jpg" alt="" /></a>
Воаля!
Поигравшись с настройками, можно добиться различных эффектов, таких как — автосмена изображений, скорости смены, ширина рамки и многое другое.
Пример можно посмотреть на странице об авторе 🙂
[…] В качестве вступления рекомендую ознакомиться с постом, посвященным fancybox. Вкратце, опишу процесс работы с […]