javascript lightbox и аналоги: увеличение изображений и куча плюшек
На многих сайтах можно встретить “красивое” увеличение картинок по клику, а также слайдшоу, перемещение между изображениями и некоторые другие функции. При этом особенно удачно иногда используется затемнение оставшейся части экрана. Получается lightbox (дословно что-то вроде “светлая коробка”).
Рассмотрим некоторые инструменты, с использованием которых можно легко разместить всплывающие изображения в lightbox у себя на сайте.
Собственно lightbox (ныне Lightbox 2)
Скрипт использует библиотеки prototype.js и scriptaculous.js Если не считать их, то размер скрипта довольно мал. http://www.lokeshdhakar.com/projects/lightbox2/
Lightview
Скрипт использует JavaScript-библиотеки prototype.js и scriptaculous.js
Сайт и демо: http://www.nickstakenburg.com/projects/lightview/
LightWindow
Также использует упомянутые библиотеки javascript. Вполне функционален.
http://stickmanlabs.com/lightwindow/
jQuery lightBox plugin
фактически плагин для Jquery с функционалом, аналогичным lightbox-оригиналу.
http://leandrovieira.com/projects/jquery/lightbox/
Highslide.js
Не использует дополнительных javascript-фреймворков. Полностью автономный скрипт с довольно внушительным функционалом. Позволяет внедрять не только изображения, но и страницы, HTML-код, flash. Удобно реализована работа с галереями изображений - предпросмотр
http://highslide.com/
FancyBox для JQuery
Похоже, лучшее решение для jquery - куча возможных вариантов анимации, работа с галереями изображений. В общем, смотреть примеры на
http://fancybox.net/
jsImageBox
очень компактный автономный скрипт без использования фреймворков
http://jsimagebox.ru/
Shadowbox.js
Решение может использовать как любой из нескольких популярных фреймворков, так и обходиться без них - нужный вариант можно загрузить с сайта
http://shadowbox-js.com/
jQuery (Tools) overlay
http://flowplayer.org/tools/overlay/index.html
Конечно, такое количество lightbox-скриптов не обязательно использовать на собственных сайтах. Вполне достаточно освоить один из вариантов. Хотя, знать о существовании альтернатив иногда бывает полезно.
Метки: javascript, js
Отличная таблица клонов lightbox:
http://planetozh.com/projects/lightbox-clones/
Мне больше всего нравится мощная и гибкая библиотека (бесплатная для некоммерческих сайтов)
Lightbox
http://randomous.com/floatbox/home
и решение полегче, полностью бесплатный плагин для jQuery
ColorBox
http://colorpowered.com/colorbox/
Вдогонку модератору: ошибка, не Lightbox, а Floatbox.
Должно быть:
Floatbox
http://randomous.com/floatbox/home
Жара виновата
Jen, спасибо за полезную информацию

А жара - так это бывает…