Что касается меня, то я любитель всяких свистелок и перделок на сайтах (ну если они не сильно рвут моск) соответственно такая беда как LightBox мне вполне симпотична. Одно время разрабы этого плагина выпилили оттуда поддержку всенародного Осла [toolfaq]IE6[/toolfaq], однако вскоре одумались, осла погладили между ушами, поддержку вернули. В целом, для тех кто умеет курить мануалы LightBox всем хорош и мил, правда традиционно используется только для изображений. А к примеру если у меня засвербило вонзить видео с YouTube или какой html в iframe? Тут конечно же приходит на помощь FancyBox, но LightBox мне как-то дороже, наверное что-то связанное с дедушкой Фрейдом
Посему решено было осмотреться на тему Lightbox-оподобных виджетов.
Приникнем к корням - Lightbox собственной персоной - демо Ежу понятно, что для получения такой неминучей красоты необходимо подключить к веб-странице библиотеку jquery-1.3.2.js, плагин jquery.lightbox.js и jquery.lightbox.css. Помни - [strike]Сила рыцаря джедай, это Сила Вселенной[/strike], что в папке images хранятся еще и изображения элементов управления, необходимые для работы плагина.
Подключаем плагин:Теперь необходимо организовать галерею. Соответственно понадобятся фотки из которых собственно и будет состоять наша галерея - тумбнайлы (минатюрки) и соответствующие большие изображения.
Конструкция картинки-миниатюры являющейся ссылкой на большую картинку - такая:
Тумбнайл засунут в тэг а, href которого направляет на большое изображение. В атрибуте rel содержится собственно ключ, благодаря которому появляется эфект красивого расширения миниатюры - lightbox. При клике по тумбнайлу в отдельном слое раскроется большое изображение. Если в атрибуте title тэга a будет какой то текст - он станет комментарием к открывшейся картинке.
Будем считать что с отдельным изображением в контексте Lightbox покончено, но настоящий джЫгит хочет привести к общему знаменателю группу картинок. Для этого вдупляем в следующий код:
К ключу lightbox мы просто привинтили произвольный суффикс, в этом примере -tour. Если юный падаван будет таким макаром прикручивать одинаковые суффиксы к изображениям одной группы, умный плагин [strike]используя Силу[/strike] автоматически сгруппирует изображения. Само собой, в таком случае, помимо комментариев, которые будут материализоваться из содержимого атрибута title, в слое большого изображения отрисуются элементы управления для навигации по нашей галерее.
Если по воле Аллаха нежелательно использовать rel, можно перетоптаться и без него. Забацать галерею простым jQuery-кодом Сила позволяет.
Ежели данный код объединить с нижеприведенной разметкой, то все элементы а, с классом gallery, внезапно обретут функциональность LightBox, и атрибут rel тут будет совершенно не нужен.
Перделка LightBox в своем арсенале имеет массу пользовательских настроек, при помощи которых можно рулить поведением плагина по умочанию. jQuery-плагины хавают подобные настройки в виде объекта, который передается методу в как аргумент. Однако в данном случае дело обстоит немного подругому - для настройки вызывается свой отдельный метод. Вот вам пример кода, что создаст галерею из картинок, которые заключены в тэг а с классом gallery и сообщит плагину некоторое количество настроек.
Кроме использования $.Lightbox.construct(); имеется еще одна возможность перекинуть настройки - в строке запроса. Например:
ПРИМЕЧАНИЕ: В LightBox поддержка IE6 включена по умолчанию. Однако для Осла передача параметров имеет место только в строке запроса (вменяемые браузеры тоже не гнушаются таким способом). Есть мнение что если в IE6 рыпнутся использовать $.Lightbox.construct(); то плагин накрутит дулю и работать откажется.
Всякие опции [strike]свистелки[/strike], которые можно передать [strike]нашей перделке[/strike] LightBox.
- 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...
Подключается предельно просто:
В башке html-файла HEAD надо ткнуть плагин носом в CSS-файл, файл библиотеки jQuery и собственно файл плагина. Разметка аналогична LightBox.
Воздвигаем нашу галерею с помощью следующего jQuery-кода:
Плагинчик так же имеет нефиговое количество настроек. Демонстрация возможжностей некоторых из них показана в нарисованном выше коде. Годная, нужна опция - 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.
Замут галерейки (или галереек) практически не отличим от анологичного действа в LightBox.
Тот же тумбнайлик заключенный в тэг а, атрибут href указывающий на большую картинку и т.д.. В атрибуте rel живет важное ключевое слово - prettyPhoto. Для того, чтобы сваять несколько разных галерей на странице, в атрибуте rel следует прописать - prettyPhoto[gallery_easy] для первой галереи, prettyPhoto[other_gallery] - для следующей и т.д....
Прибегнув к помощи jQuery-кода получаем галерею используя установки по умолчанию.
Настройки для 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 посему подробно описывать ее не буду, но тем не менее...Плюсы HighSlide JS:
- Вполне себе на уровне красивое оформление без запарок с CSS;
- До кучи пристенут файл Outlines.psd, можно при желании поизголяться над эффектами и рамками;
- Кроссбраузерность жжот - она лучшая среди перечисленных галерей для набора Opera - IE - FF - Chrome;
- Без проблем совместимо со многими jQuery-плагинами;
- Можно создать интересные слайд-шоу с всплывающими панельками и прочими бирюльками для папуасов;
- Можно воткнуть в галерею практически любые объекты содержащие html, iframe, swf и AJAX.
- Простой как дверь синтаксис вызова; в HTML не надо добавлять ничего типа rel=’lightbox’, а подстраивать вывод на лету
например, развернуть картинку
;
Но бабе Яге эта хрень норвежская не нравится - потому что надоела уже хуже горькой редьки Для любителей припасть к истокам - припадайте:
Звиздец рекомендует поделиться ссылкой с камрадами и откомментить эту заметку: