Официальный сайт (http://fancybox.net/)
На момент обновления статьи вышла уже версия 1.3.4 (2010/11/11)
Ещё одна распространенная галерея на jQuery. Проста в использовании, поддерживает все браузеры. Подключается элементарно. Кстати, можно использовать и как модальные окна.
Использование
В заголовке документа подключаем js-файлы и таблицу стилей:
1 | <script type="text/javascript" src="http://www.mihos.ru/deposit/js/jquery.min.js"></script> |
1 | <script type="text/javascript" src="http://www.mihos.ru/deposit/js/fancybox/jquery.fancybox-1.3.1.pack.js"></script> |
1 | <link rel="stylesheet" type="text/css" href="http://www.mihos.ru/deposit/js/fancybox/jquery.fancybox-1.3.1.css "> |
Вызываем FancyBox, для галереи это будет примерно так:
1 | <script type="text/javascript"> |
1 2 3 4 5 6 7 8 | $(function() { $("a[rel=fancy]").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over' }); }); </script> |
Использование как отдельной картинки:
1 | <a href="images/jquery_image_big.jpg"><img src="images/ jquery_image.jpg" /></a> |
Использование как галерея
В самом документе можно организовать это как список:
1 2 3 4 5 | <ul id="gallery"> <li><a title="c. Вязово. Картинка #1" href="http://www.mihos.ru/deposit/2011/01/vyazovo-01-800x600.jpg" rel="fancy"><img src="http://www.mihos.ru/deposit/2011/01/vyazovo-01-150x150.jpg" alt="" width="150" height="150" /></a></li> <li><a title="c. Вязово. Картинка #2" href="http://www.mihos.ru/deposit/2011/01/vyazovo-02-800x600.jpg" rel="fancy"><img src="http://www.mihos.ru/deposit/2011/01/vyazovo-02-150x150.jpg" alt="" width="150" height="150" /></a></li> <li><a title="c. Вязово. Картинка #3" href="http://www.mihos.ru/deposit/2011/01/vyazovo-03-800x600.jpg" rel="fancy"><img src="http://www.mihos.ru/deposit/2011/01/vyazovo-03-150x150.jpg" alt="" width="150" height="150" /></a></li> </ul> |
И как ссылка в тексте:
1 | <a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline - auto detect width / height</a> |
Использование как модальные окна чуть попожже
Использование для плеера или вообще видео чуть попожже
Пример
Посмотреть пример в отдельном окне
Fancybox. Описание
Осталось немного — описать свойства и методы:
zoomSpeedIn (число, По-умолчанию 0) – Скорость увеличения FancyBox-изображения (анимации) в милисекундах;
zoomSpeedOut (число, По-умолчанию 0) – Скорость уменьшения FancyBox-изображения (анимации) в миллисекундах;
zoomSpeedChange – (число, По-умолчанию 0) – Скорость смены FancyBox-изображения (анимации) в миллисекундах;
zoomOpacity (false/0..1, По-умолчанию false) – прозрачность FancyBox-контента во время анимации (по умолчанию
padding (число) – отступ, как уже поняли.
imageScale (true/false, По-умолчанию true) – «масштаб» контента. true – вписать в окно. false – окно подстраивается под контент.
frameWidth (число, По-умолчанию – 425px) – ширина, как несложно догадаться 
;
frameHeight (число, По-умолчанию – 425px) – высота;
overlayShow (true/false, По-умолчанию – true) – затенение страницы под всплывающим FancyBox окном. Цвета можно задать в CSS стилях #fancy_overlay. Найдете ;
overlayOpacity (число, По-умолчанию – 0.3) – Прозрачность;
hideOnContentClick (true/false, По-умолчанию — true) – Закрывать FancyBox окно по клику по любой его точке;
centerOnScroll (true/false, По-умолчанию — true) – Центрировать окно при прокрутке страницы;
Вообщем, очень неплохой вариант как галерея.
Используется даже в стандартных компонентах «Битрикс».
Уведомление: jQuery Fancybox | Библиотека jQuery и другие полезные вещи