Плагин FancyBox для библиотеки jQuery

В одной из предыдущих заметок я писал про то, как организовать удобный просмотр изображений на сайте. Lightbox использует библиотеки Prototype и Scriptaculous. Сегодня рассмотрим плагин FancyBox для библиотеки jQuery. Плагин позволяет

  • просматривать отдельные изображения;
  • организовать просмотр группы фотографий (фотогалерея);
  • спрятать за одной миниатюрой целую галерею фотографий;
  • выводить контент, находящийся на странице — например видеоролики с YouTube;
  • выводить произвольный контент в плавающем фрейме iframe.

Для начала нам потребуется подключить в разделе head HTML-страницы четыре JavaScript-файла:

  • jquery.js — библиотека jQuery;
  • jquery.fancybox.js — плагин FancyBox;
  • jquery.pngFix.js — позволит устранить проблему использования png-файлов в IE;
  • jquery.metadata.js — позволит использовать атрибуты class для передачи параметров плагину.

Первые два из них обязательны, а без двух остальных можно обойтись.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>

Далее необходимо подключить стиль отображения для окна просмотра:

<link rel="stylesheet" href="css/fancy.css" type="text/css" media="screen">

Добавляем на страницу картинку-миниатюру, заключенную в тэг <a>, который ссылается на полноразмерное изображение. Заголовок, если таковой требуется, можно разместить в атрибуте title.

<a href="image_big.jpg" title="my caption"><img src="image_small.jpg" alt=""/></a>

Если необходимо разместить несколько логически связанных изображений и организовать навигацию между ними в окне просмотра, то нужно добавить атрибут rel для каждого связанного изображения. Например:

<p id="gallery">
<a href="/example/fancybox/04.jpg" rel="fancy-tour">
<img src="/example/fancybox/04-thumb.jpg" />
</a>
<a href="/example/fancybox/05.jpg" rel="fancy-tour">
<img src="/example/fancybox/05-thumb.jpg" />
</a>
<a href="/example/fancybox/06.jpg" rel="fancy-tour">
<img src="/example/fancybox/06-thumb.jpg" />
</a>
</p>

На странице может быть размещено несколько фотогалерей и каждая из них может содержать любое число изображений.

Теперь JavaScript-код:

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

Мы отбираем все нужные нам элементы <a> и передаем этот набор плагину FancyBox, который проделывает всю остальную работу. Можно использовать дополнительные опции:

  • hideOnContentClick — скрывать контент по клику на полноразмерном изображении. Может принимать значения true или false. По умолчанию false.
  • zoomSpeedIn — указывается скорость эффекта (в миллисекундах) при открытии полноразмерного изображения. По умолчанию — 0, т.е. без эффекта.
  • zoomSpeedOut — указывается скорость эффекта (в миллисекундах) при закрытии полноразмерного изображения. По умолчанию — 0, т.е. без эффекта.
  • overlayShow — показывать или нет дополнительный слой, который “затемняет” основное содержимое страницы. Может принимать значения true или false. По умолчанию false.
  • overlayOpacity — прозрачность для overlayShow, если конечно он true. Изменяется от 0 до 1.
  • frameWidth — определяет ширину контейнера, если выводится iframe и inline содержимое (см. пример).
  • frameHeight — определяет высоту контейнера, если выводится iframe и inline содержимое (см. пример).
  • itemLoadCallback — определяет пользовательскую функцию, которая выбирает группу фотографий для отображения (см. пример).

А теперь посмотрим, как за одной миниатюрой скрывается целый набор полноразмерных изображений.

HTML:

<a id="custom" href="javascript:;"><img src="/example/fancybox/07-thumb.jpg" alt="" /></a>

JavaScript:

$("a#custom").fancybox({
  'itemLoadCallback': getGroupItems
});

var imageList = [
  {url: "/example/fancybox/07-1.jpg", title: "Первая картинка"},
  {url: "/example/fancybox/07-2.jpg", title: "Вторая картинка"},
  {url: "/example/fancybox/07-3.jpg", title: "Третья картинка"}
];

function getGroupItems(opts) {
  jQuery.each(imageList, function(i, val) {
    opts.itemArray.push(val);
  });
}

Здесь мы создаем массив imageList, каждым элементом которого является объект, состоящий из пар ключ-значение:

  • url — URL полноразмерного изображения;
  • title — содержит комментарий к изображению.

Разберем ещё, как вывести в галерею некий скрытый контент, находящийся на странице. В качестве примера используем видеоролик с YouTube.

HTML:

<a href="#testube" id="video" class="{frameWidth: 425, frameHeight: 355}"><img src="images/08-thumb.jpg"  alt="" /></a>

<div style="display:none" id="testube">
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/...&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/...&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="transparent" width="425" height="344"></embed>
</object>
</div>

JavaScript:

$("a#video").fancybox({
  zoomSpeedIn: 0,
  zoomSpeedOut:0,
  frameWidth: 425,
  frameHeight: 344
});

И последнее — вывод любого контента через iframe.

HTML:

<a id="frame" href="http://www.google.ru/"><img src="/example/fancybox/09-thumb.jpg" alt="" /></a>

JavaScript:

$("a#frame").fancybox({
  zoomSpeedIn: 0,
  zoomSpeedOut:0,
  frameWidth: 800,
  frameHeight: 600
});

Ссылки по теме:

Комментариев: 17

  1. мобильник:

    Спасибо за подробное описание, буду экспереметировать с fancybox, а нет ли утилиты, которая бы делала html галерею с встроенным fancybox?

  2. admin:

    мобильник, что-то я не понял вопрос. Есть некий скрипт (а если быть более точным - несколько скриптов: библиотека jQuery и плагины к ней), который позволяет организовать просмотр фотографий. Скрипты просто подключаются к странице и вызывается функция fancybox(). И все работает. О какой утилите разговор?

  3. dl:

    Спасибо! Хороший материал, все вроде работает.
    Сам к сожалению, весьма не силен в ЖС :( Нет ли еще плагина, чтобы превьюшки показывать в окошке с большим фотом? И еще хотелось бы автоматическое слайдшоу… Подскажите хоть в какую сторону копать…

  4. admin:

    dl, по поводу превьюшек не понял вопрос. Можно подробнее? По поводу автоматического слайдшоу - вот этого добра хватает. Я описывал плагин для jQuery, позволяющие организовать слайдшоу:
    Плагин Cycle для библиотеки jQuery. Часть 1
    Плагин Cycle для библиотеки jQuery. Часть 2
    Плагин Cycle для библиотеки jQuery. Часть 3
    Вот еще несколько
    Делаем слайдшоу
    jQuery: слайдшоу из неупорядоченного списка
    jQuery: jqGalScroll v2.1 (Photo Gallery)
    jQuery: jqGalViewII (Photo Gallery)
    jCarousel
    jCarousel Lite

  5. dl:

    Если использовать данную вариацию FancyBox имеем 2 окна - в одном превьюшки, в другом сами картинки выплывают (которое с крестиком и подписью). Хотелось бы, чтобы в одном окне была например 1 превьюшка, а во втором (появляющемся) показывалось большое изображение и остальные превьюшки из группы. Т.е. что-то вроде когда под одной миниатюрой список, но этот список в появившемся окне “раскрывался”, т.е. превьюшки были видны. Цель - чтобы из окна просмотра большого изображения можно было двигаться не только на одну вперед или одну назад а выбирать любое фото из галереи.

    По слайдшоу спасибо, сейчас буду посмотреть.

  6. Алескей:

    В случае когда фотогалерея с id=single, как сделать так, что бы не все ссылки открывались в div’e? Например, ссылки, которые необходимо открыть в этом же окне не открывались в окне просмотра.

  7. oleg:

    В firefox все работает, а в IE большая картинка появляется в размере не соответсвующем оригиналу, причем не пропорционально (например оригинал большой картинки 550х456, а всплывает с размером 512х378). Не подскажете, почему?

  8. Дмитрий:

    Все сделал как Вы описали, проверял не однократно, но почему то не работает ничего. Подскажите где ошибся. http://eindep.com/1.html

  9. Дмитрий:

    Пробовал разными способами, не получается. Картинки все видны но открываются в отдельной строке..

  10. admin:

    Дмитрий, во-первых, зачем подключать библиотеку jquery дважды? А во-вторых, советую разобраться, что означает конструкция $(”p#single a”)…
    jQuery – Javascript нового поколения

  11. Дмитрий:

    Ха… разобрался.. спасибо за подсказки…

  12. жирный слон:

    Спасибо все очень интересно пойду пробовать может и уменя получится.

  13. Orlenko K.N.:

    Спасибо! поставил себе. Интересно выглядит, только в IE6,7 всё-равно присутствуют некоторые неточности

  14. qpeo:

    опять же, в ИЕ8 какая то “лажа”, при загрузке изображения гифка загрузки по оси у повтряется раз 10 то центра =(

  15. admin:

    в ИЕ8 какая то “лажа”
    Я не удивлен. MS много лет методично нарушал стандарты, а потом (вдруг!) решил, что надо бы соблюдать. Думаю, надо посмотреть на официальном сайте плагина последнюю версию.

  16. knight:

    Всем привет,может подскажите.
    У меня проблемма со скриптом, принажатие на первую картинку (test1) у меня все работает, но когда я нажимаю на остальные картинки то он просто переходит на другую страницу, что делать ?

    пример тут http://zxc180.narod.ru/

  17. knight:

    ложная тревога, все работает!
    всем спасибо.

Оставьте свой отзыв