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-скриптов не обязательно использовать на собственных сайтах. Вполне достаточно освоить один из вариантов. Хотя, знать о существовании альтернатив иногда бывает полезно.

Метки: ,

Автор будет признателен, если Вы поделитесь ссылкой на статью, которая Вам помогла:
BB-код (для вставки на форум)

html-код (для вставки в ЖЖ, WP, blogger и на страницы сайта)

ссылка (для отправки по почте)

Комментарии (3) к записи “javascript lightbox и аналоги: увеличение изображений и куча плюшек”

  1. jen сообщает :

    Отличная таблица клонов lightbox:
    http://planetozh.com/projects/lightbox-clones/

    Мне больше всего нравится мощная и гибкая библиотека (бесплатная для некоммерческих сайтов)

    Lightbox
    http://randomous.com/floatbox/home

    и решение полегче, полностью бесплатный плагин для jQuery

    ColorBox
    http://colorpowered.com/colorbox/

  2. jen сообщает :

    Вдогонку модератору: ошибка, не Lightbox, а Floatbox.
    Должно быть:
    Floatbox
    http://randomous.com/floatbox/home
    Жара виновата :)

  3. levik сообщает :

    Jen, спасибо за полезную информацию :)
    А жара - так это бывает… :)

Добавить комментарий