Lightbox, PrettyPhoto, NFLightBox, HighSlide - Что же спасет мир - красота или массовые растрелы?

Что касается меня, то я любитель всяких свистелок и перделок на сайтах (ну если они не сильно рвут моск) соответственно такая беда как LightBox мне вполне симпотична. Одно время разрабы этого плагина выпилили оттуда поддержку всенародного Осла [toolfaq]IE6[/toolfaq], однако вскоре одумались, осла погладили между ушами, поддержку вернули. В целом, для тех кто умеет курить мануалы LightBox всем хорош и мил, правда традиционно используется только для изображений. А к примеру если у меня засвербило вонзить видео с YouTube или какой html в iframe? Тут конечно же приходит на помощь FancyBox, но LightBox мне как-то дороже, наверное что-то связанное с дедушкой Фрейдом Посему решено было осмотреться на тему Lightbox-оподобных виджетов.




Ежу понятно, что для получения такой неминучей красоты необходимо подключить к веб-странице библиотеку jquery-1.3.2.js, плагин jquery.lightbox.js и jquery.lightbox.css. Помни - [strike]Сила рыцаря джедай, это Сила Вселенной[/strike], что в папке images хранятся еще и изображения элементов управления, необходимые для работы плагина.
Подключаем плагин:

Квак! <link type="text/css" href="js/jquery.lightbox.css" rel=" stylesheet" /><script src="js/jquery-1.3.2.js" type="text/ javascript"></script><script src="js/jquery.lightbox.js"  type="text/javascript"></script>

Теперь необходимо организовать галерею. Соответственно понадобятся фотки из которых собственно и будет состоять наша галерея - тумбнайлы (минатюрки) и соответствующие большие изображения.

Конструкция картинки-миниатюры являющейся ссылкой на большую картинку - такая:

Квак!     <a rel="lightbox" href="images/large.jpg" title="Какой- то текст"><img src="images/small.jpg" /></a>

Тумбнайл засунут в тэг а, href которого направляет на большое изображение. В атрибуте rel содержится собственно ключ, благодаря которому появляется эфект красивого расширения миниатюры - lightbox. При клике по тумбнайлу в отдельном слое раскроется большое изображение. Если в атрибуте title тэга a будет какой то текст - он станет комментарием к открывшейся картинке.

Будем считать что с отдельным изображением в контексте Lightbox покончено, но настоящий джЫгит хочет привести к общему знаменателю группу картинок. Для этого вдупляем в следующий код:

Квак! <a rel="lightbox-tour" href="images/large.jpg" title=" Какой-то текст"><img src="images/small.jpg" /></a>

К ключу lightbox мы просто привинтили произвольный суффикс, в этом примере -tour. Если юный падаван будет таким макаром прикручивать одинаковые суффиксы к изображениям одной группы, умный плагин [strike]используя Силу[/strike] автоматически сгруппирует изображения. Само собой, в таком случае, помимо комментариев, которые будут материализоваться из содержимого атрибута title, в слое большого изображения отрисуются элементы управления для навигации по нашей галерее.

Если по воле Аллаха нежелательно использовать rel, можно перетоптаться и без него. Забацать галерею простым jQuery-кодом Сила позволяет.

Квак! $(function(){   $('a.gallery').lightbox(); });

Ежели данный код объединить с нижеприведенной разметкой, то все элементы а, с классом gallery, внезапно обретут функциональность LightBox, и атрибут rel тут будет совершенно не нужен.

Квак! <a class="gallery" href="images/large.jpg" title="Какой- то текст"><img src="images/small.jpg" /></a>

Перделка LightBox в своем арсенале имеет массу пользовательских настроек, при помощи которых можно рулить поведением плагина по умочанию. jQuery-плагины хавают подобные настройки в виде объекта, который передается методу в как аргумент. Однако в данном случае дело обстоит немного подругому - для настройки вызывается свой отдельный метод. Вот вам пример кода, что создаст галерею из картинок, которые заключены в тэг а с классом gallery и сообщит плагину некоторое количество настроек.

Квак! $(function(){   $("a.gallery").lightbox();   $.Lightbox.construct({     text: {       image: "Фото",       of: "из"     },     download_link: false,     opacity: 0.5,     show_linkback: false   }); });

Кроме использования $.Lightbox.construct(); имеется еще одна возможность перекинуть настройки - в строке запроса. Например:

Квак! <script src="js/jquery.lightbox.js? show_linkback=false&text.image=Фото&text.of=из" type="text/ javascript"></script>

ПРИМЕЧАНИЕ: В LightBox поддержка IE6 включена по умолчанию. Однако для Осла передача параметров имеет место только в строке запроса (вменяемые браузеры тоже не гнушаются таким способом). Есть мнение что если в IE6 рыпнутся использовать $.Lightbox.construct(); то плагин накрутит дулю и работать откажется.

• show_linkback - по умолчанию true, кажет ссыль на сайт plugins.jquery.com в справа сверху. Делаем false, чтобы все поразились нашему уму и сообразительности.
  
• show_helper_text - по умолчанию true, показывает крест на пузе - (Click to close) в справа сверху и всплывающие подсказочки (Hover to interact) когда курсор находится над этим текстом. Делаем false, нечего потому что на тексты с подсказками смотреть.
  
• show_info - по умолчанию 'auto', кажет текст, который в title под открывшимся изображением только если курсор пролетает над картинкой. Соответственно чтобы всегда показывать тайтл - ставим true.
  
• show_extended_info - по умолчанию 'auto', кажет дополнительную инфу типа (Image 1 of nn) когда указатель мыши находится над областью, где заветилась основная инфа (текст, содержащийся в атрибуте title). Дабы гордо показывать эту информацию независимо от того где находится курсор настоящие джЫгиты используют значение true.
  
• download_link - по умолчанию true, разрешает распахнуть полноразмерное изображение в новом окне або вкладке браузера, гавкнув на ссылку, которая представляет из себя текст комментария к изображению (тот самый текст который содержится в атрибуте title). Чтобы пресечь подобные поползновения, передаем false.
  
• auto_resize - по умолчанию true, изменяет размеры изображения, если оно не влазит в область просмотра. Соответственно false, если надо отменить это поведение.
  
• ie6_support - по умолчанию true, включена поддержка IE6. ДжЫгиты передают false - надо переводить людей на нормальные браузеры.
  
• ie6_upgrade - по умолчанию true, теоретически должно казать сообщение, взывающее к пользователям о том что IE6 - унылое говно. Почему-то не срабатывает в 90% случаев.
  
• speed - количество миллисекунд, в течении которых произойдет переход между двумя изображениями. По умолчанию 400.
  
• baseurl - по умолчанию null, однако можно указать url для автоматического подключения файлов, которые использует скрипт (стили, картинки).
  
• files - объект, в свойствах коего можно передать местоположение нужных файлов (используется в том случае если названия файлов изменялись). Разрешены к использованию следующие свойства: js.lightbox, js.colorBlend, css.lightbox, images.prev, images.next, images.blank, images.loading.
  
• text - объект, в свойствах которого можно передать текст частей интерфейса. ДжЫгитами используется для перевода на русский язык:-) разрешены к использованию свойства: image, of, close, closeInfo, download, help.close, help.interact, about.text, about.title, about.link.
  
• keys - объект, определяющий "горячие клавиши" для навигации по галерее туда и сюда, а также для закрытия надоевшей галереи. Рекомендованные свойства close, prev, next.
  
• opacity - прозрачность слоя, при просмотре изображений галереи. Значение от 0 до 1. По умолчанию используется 0.9.
  
• padding - по умолчанию null, определяет отступы вокруг просматриваемой картинки.
  
• rel - по умолчанию 'lightbox', определяет значение в атрибуте rel тега а, найдя который плагин автоматически делает галереи. не возбраняется предавать любое значение. Плагину пофих.
  
• auto_relify - по умолчанию true, объясняет LightBox-у что надо бы на странице автоматически понаходить картинки с соотвествующими атрибутами и привести их в галерейный вид. Чтобы не умничал - значение false.

• Плюсы - милое сердцу оформление, большинство опций реально интересны.
  
• Минусы - заморочки с настройкой плагина ежели приходится настраивать под IE6, достаточно туп и ограничен - не умеет работать ни с чем кроме изображений.

Галерея NFLightBox

По сравнению с обычным LightBox не имеет таких заморочек с настройкой под все основные браузеры, однако аналогично LightBox-у кажет только изображения. Однако данный экземпляр имеет возможность автоматической смены изображений - слайдшоу.

Зырим дему, ощущаем разницу с LightBox...

Подключается предельно просто:

Квак! <link type="text/css" href="css/nf.lightbox.css" rel=" stylesheet" /><script src="js/jquery-1.3.2.min.js" type=" text/javascript"></script><script src="js/NFLightBox.js"  type="text/javascript"></script>

В башке html-файла HEAD надо ткнуть плагин носом в CSS-файл, файл библиотеки jQuery и собственно файл плагина. Разметка аналогична LightBox.

Квак! <a href="images/large.jpg" title="Какой-то текст" ><img src="images/small.jpg" /></a>

Воздвигаем нашу галерею с помощью следующего jQuery-кода:

Квак! $('a').lightBox({   overlayBgColor: '#363',   txtImage: 'Фото',   txtOf: 'из',   txtPrev: ' Назад',   txtNext: ' Вперед',   keyToClose: 'q',   keyToPrev: 'z',   keyToNext: 'c' });

Плагинчик так же имеет нефиговое количество настроек. Демонстрация возможжностей некоторых из них показана в нарисованном выше коде. Годная, нужна опция - overlayBgColor - дает возможность менять цвет фонового слоя промеж открываемым изображением и веб-страницей которая оказывается под этим слоем. В LightBox для достижения аналогичного эфекта пришлось бы препарировать css-файл.

• overlayBgColor - по умолчанию #000 (черный), задает цвет фонового промежуточного слоя.
  
• overlayOpacity - по умолчанию 0.8, декларирует прозрачностьфонового слоя. Значения соответственно от 0 до 1.
  
• imageLoading, imageBtnPrev, imageBtnNext, imageBtnClose, imageBlank, imageBtnBottomPrev, imageBtnBottomNext, imageBtnPlay, imageBtnStop - вся эта шайка [strike]эстонских пидорасов[/strike] параметров отвечает за передачу путей к изображениям и свойствам элементов управления.
  
• containerBorderSize - по умолчанию 10, задает толщину рамки вокруг просматриваемого изображения.
  
• containerResizeSpeed - по умолчанию 500, время анимации перехода от одного кадра к другому.
  
• txtImage, txtOf, txtPrev, txtNext - Есть кому не ясно? Ладно... Задав значения txtImage: 'Фото' и txtOf:'из' мегакодер будет видидеть не Image 1 of 8, а Фото 1 из 8 и очень этому радоваться.
  
• keyToClose, keyToPrev, keyToNext - горячие клавиши управления просмотром.
  
• slideShowTimer - по умолчанию 5000, время задержки изображения в слайд-шоу в милисекундах.

• Плюсы - неплохое оформление, большинство опций действительно полезны, есть автоматическая смена фото при просмотре, нет сложностей с настройкой.
  
• Минусы - png в качестве элементов управления криво выглядят в IE6, Кроме изображений знать неиче не желает - короче слегка улучшенный LightBox не более того.

Мега-галерея PrettyPhoto

Чешутся руки накорябать - PrettyPhoto жжот! Feel the power of PrettyPhoto! и т.д. К нашей радости эта припарка может работать отнюдь не только с рисунками. Очень даже можно выводить в ней видео с YouTube, ролики .mov (Apple QuickTime), всякую шнягу во flash-формате и в принципе любое содержимое через iframe. А еще этот чудо-плагин имеет свой API, о чем LightBox-у и NFLightBox можно только мечтать в эротических снах.

Вдупляем в демку и как вводится - сечем отличия от других галерей.

В первых строках жизненно важно подключить файл библиотеки jquery-1.3.2.js, файл плагина jquery.prettyPhoto.js и файлик стилей плагина prettyPhoto.css.

Квак! <link type="text/css" href="css/prettyPhoto.css" rel=" stylesheet" /><script src="js/jquery-1.3.2.min.js" type=" text/javascript"></script><script src="js/ jquery.prettyPhoto.js" type="text/javascript"></script>

Замут галерейки (или галереек) практически не отличим от анологичного действа в LightBox.

Квак! <a rel="prettyPhoto[gallery_1]" href="max/1.jpg" title=" Фото номер 1"><img src="min/1.jpg" alt="Фото номер 1" /></a>

Тот же тумбнайлик заключенный в тэг а, атрибут href указывающий на большую картинку и т.д.. В атрибуте rel живет важное ключевое слово - prettyPhoto. Для того, чтобы сваять несколько разных галерей на странице, в атрибуте rel следует прописать - prettyPhoto[gallery_easy] для первой галереи, prettyPhoto[other_gallery] - для следующей и т.д....

Прибегнув к помощи jQuery-кода получаем галерею используя установки по умолчанию.

Квак! $(function(){   $("a[rel^='prettyPhoto']").prettyPhoto(); });

• animationSpeed - по умолчанию 'normal'. Варианты - 'fast' и 'slow'. Отвечают за скорость анимации при переходе от одной картинки к другой.
  
• padding - по умолчанию 40. Отбивает отступы вокруг картинки.
  
• opacity - по умолчанию 0.80, прозрачность промежуточного слоя. Возможные значения от 0 до 1.
  
• showTitle - по умолчанию true. Подпись (содержимое title тэга а), отображаемая слева вверху. Для отключения - false.
  
• allowresize - по умолчанию true. Позволяет или запрещает масштабирование изображения, ежели оно не влезает в область просмотра в браузере. Можно вдарить по рукам скрипту сказав false.
  
• counter_separator_label - по умолчанию '/'. Знак-разделитель в счетчике картинок.
  
• theme - по умолчанию 'light_rounded'. Включает ту или иную тему оформления. Ага. Ведь может же если захочет! Помимо light_rounded есть варианты: dark_rounded, light_square, dark_square. Для упрямого IE6 насильно выбирается тема light_square. Потому что Осел.
  
• hideflash - по умолчанию false. Ныкаеть с глаз долой flash-объекты на странице когда просматривается галерея, воизбежание того что флешь всегда любит сверху.
  
• modal - по умолчанию false. Если будет true - то завершить просмотр галереи можно будет только нажатием на картинку 'close'. Загадочная опция, впрочем кто я такой чтобы судить.

Пара хороших, годных опций, в которых есть возможность задать callback-функции, которые вызываются при наступлении определенного события.

• changepicturecallback - функция, заданная в этом параметре, будет вызываться постоянно при смене изображения галереи.
  
• callback - функция, заданная в этом параметре, будет вызываться когда просмотр будет завершен

Ко всем крайне полезным функциям добрые разработчики дали нам, убогим, еще и четыре метода:

$.prettyPhoto.open('path/to/image','Title',' Description') - разрешает открыть целевую галерею.
$.prettyPhoto.changePage('next') - происходит переход к следующему изображению галереи.
$.prettyPhoto.changePage('previous') - происходит переход к предыдущему изображению галереи.
$.prettyPhoto.close() - закрыть галерею нахрен.

Неподдельный интерес и высунутый в азарте язык наверняка вызовет метод, с помощью которого можно распахнуть галерею. Посему смотрим демо. Код там понятен даже йожегам и эстонским волкам.

В целом данный плагин вполне может удовлетворить практически все потребности веб-мастеров. Однако и тут не без засады - нет слайд-шоу. Но, если взять в руки напильник и применить его по назначению можно дополнительно подключить плагин jquery.timers.js и пользуясь беспомощным положением функций changepicturecallback и callback с пролетарской ненавистью определим им функции. В файле html добавим select, где можно будет невозбранно выбирать значения задержки при смене картинок. Плод трудов праведных: смотрите демо, пытливые умы могут там же засмотреть исходник.

В changepicturecallback, используя разносторонние возможности плагина jQuery Timers, при каждой смене картинок постоянно запускаем одноразовый таймер значение которог получено из выбранной в селекте опции . Как только таймер срабатывает - колдуем метод $.prettyPhoto.changePage('next') бескомпромисно принуждая[toolfaq]БДСМ, доминирование :-)[/toolfaq] плагин казать нам следующее изображение. В опции callback задаем функцию останавливающую таймер, ежели нашелся гад который закрыл галерею до окончания картинок и при помощи alert плюем в него ядом.

Ну и напоследок - серьезный конкурент перечисленных выше плагинов - HighSlide JS правда построен он не на jquery посему подробно описывать ее не буду, но тем не менее...

• Вполне себе на уровне красивое оформление без запарок с CSS;
  
• До кучи пристенут файл Outlines.psd, можно при желании поизголяться над эффектами и рамками;
  
• Кроссбраузерность жжот - она лучшая среди перечисленных галерей для набора Opera - IE - FF - Chrome;
  
• Без проблем совместимо со многими jQuery-плагинами;
  
• Можно создать интересные слайд-шоу с всплывающими панельками и прочими бирюльками для папуасов;
  
• Можно воткнуть в галерею практически любые объекты содержащие html, iframe, swf и AJAX.
  
• Простой как дверь синтаксис вызова; в HTML не надо добавлять ничего типа rel=’lightbox’, а подстраивать вывод на лету
  например, развернуть картинку
  

  Квак! $(”img.th”).click(function() ); или html-блок: $(”#sh”).click(function() )});

  ;

Для любителей припасть к истокам - припадайте:

• Lightbox
  
• NotesForLightBox
  
• prettyPhoto
  
• Highslide JS