« Класс для работы с zip-архивами
Общее представление о DOM. Часть 3 »

Просмотр изображений и фотогалерея

2 Октябрь 2008, 14:15

Lightbox 2 — простой скрипт для удобного просмотра изображений на страницах вашего сайта. Прост в установке и работает во всех популярных браузерах. Пример работы можно посмотреть здесь. Подключение самой библиотеки выполняется в два шага:

Установка

Lightbox использует библиотеки Prototype и Scriptaculous. Вы должны подключить их в разделе head HTML-страницы:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Далее необходимо подключить стили отображения для окна просмотра::

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Активация

Для того чтобы картинка открывалась при помощи Lightbox, нужно добавить атрибут rel=”lightbox” в тег ссылки на картинку. Заголовок, если таковой требуется, можно разместить в атрибуте title. Например, так:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Если необходимо разместить несколько логически связанных изображений и организовать навигацию между ними в окне просмотра, то нужно разместить в аттрибуте rel=”lightbox” название группы в квадратных скобках для каждого связанного изображения. Например:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

На странице может быть размещено несколько фотогалерей и каждая из них может содержать любое число изображений.

Предыдущая версия библиотеки LightBox реализована без применения сторонних библиотек. В ней нет анимации и нет возможности просмотра нескольких связанных изображений.

Скачать Lightbox JS v2.04

Рубрика: JavaScript  |  Отзывы (RSS)  |  Трекбек

Комментариев: 8

  1. qpeo:

    добрый день,очень интерестный вьювер изображений, но в ИЕ както лман прорисовывется вся динамика графики скрипта, в Опере очень красиво и дорогостоюще. Вы бы не могли подсказать какой то скрипт что бы эффектно и эффективно рабтал в этих двух браузерах?

    18 Июнь 2009, 19:21

  2. admin:

    qpeo, я проверял работу библиотеки в 6-ой и 7-ой версиях MS IE - никаких проблем не заметил.

    19 Июнь 2009, 9:40

  3. Елена:

    Здравствуйте.
    Спасибо за ваш сайт и за этот скрипт. Очень легко ставится, единственное вопрос. Можно ли сделать так, чтобы было ещё и слайд-шоу, то есть, не нажимать на мышь, а чтобы фотки сами менялись? Может добавить какой-то код?
    Подскажите, кто знает, заранее спасибо за ответ.

    30 Июль 2009, 20:46

  5. Елена:

    Спасибо, ща буду лазить, смотреть )))))
    Очень инстересно….

    31 Июль 2009, 12:19

  6. dalas:

    Огромное спасибо за такой понятный скрипт!!!

    21 Февраль 2010, 17:10

  7. ACID_RAVEN:

    Большое человеческое спасибо за этот скрипт! Все ясно, понятно и разложено по полочкам! Искал что-то подобное в интернете на многих сайтах, находил, но читать двухстраничный бред с кодировкой - это очень сложно и долго. “Измените тут, измените там…допишите то, допишите это”. А тут все просто. Я нашел именно то, в чем был заинтересован. Спасибо огромнейшее!

    25 Апрель 2011, 19:30

  8. Сергей:

    скрипт очень полезный, но в ИЕ работает только при включеной опции “представление совместимости”

    1 Май 2011, 13:16

Оставьте свой отзыв