JQuery: Галерея картинок с помощью FancyBox

В этой статье вы узнаете как организовать простую галерею изображений. В этом нам поможет отлично зарекомендовавший себя инструмент 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>

Воаля!
Поигравшись с настройками, можно добиться различных эффектов, таких как — автосмена изображений, скорости смены, ширина рамки и многое другое.
Пример можно посмотреть на странице об авторе 🙂