Перейти к навигации · Перейти к содержимому

Litebox: скрипт для показа картинок

Не так давно наткнулся на чудесный скрипт Lightbox, написанный на javascript, который позволяет очень удобно обращаться с картинками на сайте. Если вкратце, то этот скрипт при клике на уменьшенном изображении создает динамический popup, показывающий полную картинку.

Для этого вам достаточно подключить Lightbox.js, а затем дописать к каждой ссылке-предпросмотру атрибут rel="lightbox". Например так:

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

Lightbox уже был несколько раз переработан разными товарищами, например: модальные окна, lightbox plus и т. д.

Я же речь поведу о своей версии — дополненной и переработанной…

Litebox

Да, именно Litebox — так я назвал свою версию, которая несколько отличается от оригинала.

Первоначальной идеей послужил конечно же Lightbox. Однако, немного позже я наткнулся на портфолио веб-технолога Камерона Адамса, в котором он использовал похожий скрипт (самописный), но занимал он гораздо меньше места (около 3-х килобайт). Я всегда любил минимализм, поэтому этот вариант мне понравился. Кроме того, скрипт Камерона имел интересную особенность — позволял просматривать все картинки на странице последовательно, не закрывая модального окна.

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

Моя версия

В общем, сел я вчера и написал свою версию, получившуюся из сложения обоих перечисленных вариантов. Делал для себя, но если кому-то понравится — можете пользоваться на здоровье. Краткие характеристики:

  • Весит 4.5 5 Кб (вместо 12.5 у Lightbox и 70 у второй версии) — потому и называется Litebox =)
  • Имеет возможность просматривать картинки, не закрывая окна
  • Не требует указания размеров — вычисляет автоматом
  • Контроль оформления вынесен в CSS

Примеры

Кликните на любой из каринок:

typogeneratortypogeneratortypogenerator

Как пользоваться

Для использования скрипта, вам достаточно положить файлы litebox.js и litebox.css в корень сайта и подключить их в секции head:

<script type="text/javascript" src="/litebox.js"></script>
<link rel="stylesheet" type="text/css" href="/litebox.css" />

Признак картинок-предпросмотра я оставил таким же как и у Lightbox, то есть вы можете использовать атрибут rel="lightbox".

Вот пример кода одной из картинок выше:

<a href="/images/7.jpg" rel="lightbox" title="Это пример большой картинки"><img src="/images/7t.jpg" alt="typogenerator" /></a>

Только не забудьте закинуть все необходимые файлы (картинки и CSS) в нужную папку (по умолчанию в корень сайта, но это можно поменять в CSS).

Ваши пользователи могут открыть Litebox простым кликом по уменьшенной картинке. Закрыть окно можно двумя способами: нажав ПРОБЕЛ или кликнув на увеличенной картинке. Перемещаться между картинками можно при помощи клавиш-стрелок (влево-вправо) на клавиатуре — спасибо за идею bestann — или при помощи специальных кнопок внизу картинки.

Файл: Litebox (версия от 2006-08-18)

History

  • 2006-08-18 — теперь окно закрывается и по нажатию ESC
  • 2006-05-09 — исправлена ошибка закрытия окна в Safari (насколько смог проверить), а также теперь в Firefox, клик средней клавишей не приводит к открытию двух окон
  • 2006-04-11 — теперь перемещение по картинкам можно делать при помощи клавиш ? и ? (не работает в IE), а для закрытия картинки используется ПРОБЕЛ
  • 2006-03-23 — добавлена надпись, поясняющая закрытие окна и немного подправлен .css

English version (brief)

This is my remake (fully rewriten) of famous Lightbox JS by Lokesh Dhakar. I was also inspired by cool script of Cameron Adams and make a tiny and light version of both these scripts — Litebox JS. I’ve made it for myself, but if you like it — feel free to use it as you want.

Features:

  • Extra light: 4.5 5 Kb instead of 12.5 Kb Lightbox (and 70 of ver.2)
  • Allow to switch images within modal window
  • Auto-calculate dimensions (cannot in version of Cameron)
  • Extended CSS-control

To Use: Download .zip file in list above. Put all files from archive to appropriate folders (by default to root catalog), include litebox.js in your head section and then add rel="lightbox" attribute (equal to lightbox js attribute) to your thumbnail links.

Комментарии

Отличное решение! Спасибо.

А я вот не понял. После всплытия большой первой картинки – ни тебе вернуться кнопкой браузера Back, ни каким-либо иным внятным способом. Такое впечатление, что не пройдя все картинки до конца, красиво прервать процесс нельзя. (Пробовал в Firefox.)

VYu: Достаточно кликнуть на большой картинке, чтобы ее закрыть. Еще нажав клавишу «x» можно окно закрыть.

Значит юзабилити все-таки пострадало из-за того, что я не написал про закрытие окна внизу, как это сделано у Lightbox. Наверное придется доделать…

неплохо бы кнопочку для закрытия, или уж вообще без кнопочек ;)

frst: всё будет. дайте срок =)

Автор оригинальной версии лайтбокса выпустил вторую версию. Как всегда, довольно симпатично смотрится
Lightbox JS v2.0

Боюсь, что её сильно уменьшить уже не получится =)

не плохо

Спасибо за скриптик! Чего не хватает: клавишной навигации по рисункам (как это сделано в оригинальной версии). Или вариант p и n, но возможно проще будет стрелочками влево-вправо.
И вопросик: вот у меня темный фон сайта. Можно фильтр применить, чтоб фотовое изображение, когда открывается рисунок, становилось не темее, а светлее?

Я тоже за минимализм!

Еще не работает закрытие клавишей x из Firefox. Из IE работает. В оригинальном плагине посмотрела- везде работает.

bestann: про клавишную навигацию — это идея. наверное сделаю. Кстати, в «оригинальной» версии навигации вообще не было. Она только во второй версии появилась.

А про клавишу ‘x’ — у меня работает. Может просто стоит русская раскладка? У меня когда русский выбран окно тоже не закрывается, а когда английский — все ок.

ага. Спасибо. Заработало в английской раскладке! Интересно, а нельзя сделать, чтоб в обеих раскладках работало?
Я как раз и имела ввиду 2 версию. Оригинальная- в смысле того автора, кто придумал.

Вот, сделал перемещение клавишами-стрелками. Закрытие теперь пробелом — чтобы в любой раскладке работало.

Кстати, насчет светлого фона. По идее, для этого достаточно заменить полупрозрачный PNG файл thumb-trans.png + немного подправить CSS для IE (там где цвет указан).

В IE пробел работает, а стрелочки-нет. Здесь нажатие на стрелочки или не дает реакции реакции, или двигается изображение (если оно больше видимой области экрана). Если нажимать в Firefox – все ОК, здесь я большое изображение могу просмотреть двигая ползунок мышкой.

И еще. А нельзя большие изображения, не умещающиеся на экран (хотя как определить- экраны у всех разные, а может где-то задавать максимальную высоту/ширину?) выводить уменьшенными, чтоб видна была и надпись под изображением (та что в title), а размером манипулировать клавишами + и .

И проблема у меня. На главной странице, где список постов (как вы видите, у меня Wordpress кстати, Textpattern чем лучше?), у меня lightbox работает, а если выводить пост отдельно (там где только один пост и комментарии к нему), не работает.
При этом я смотрю код. Там все вроде в наличии:

Кстати, напишите в разделе «Как пользоваться», что ссылку на файл css надо тоже добавить.

bestann: указанный фкнционал имеется у lightbox plus. Не знаю, буду ли я делать это в своем скрипте, так как главная цель — уложиться в 5 Кб, соответственно от чего-то приходится отказываться.

А насчет Вашего сайта: на внутренних страницах надо подключать скрипт, указывая в начале слеш: /litebox.js, так как иначе он ищется в подпапке wordpress. То же самое касается CSS-файла.

Сейчас внесу пояснения в страницу.

Ага, заработало. Значит на главной странице он ищет в папке www, а на странице поста в другой папке (наверно wp-content, т.к. у меня все содержимое папки wordpress в www лежит).
Кстати, фон поменяла, изменив png. Но в IE остается как было (почти черный), даже если я меняю цвет в css:
/* hack for IE < 7 opacity */
background-color: #вот тут меняла;
back\ground-color: transparent;
Придется с фильтром еще поколбаситься. Вот почему не хотят они полупрозрачность png нормально воспринимать? Вот пыжься тут, мучайся.

Ладно, если с + и – не будет работать, переживем. А вот стрелочки как заставить в IE работать? Ведь чрезвычайно удобно!

Кажется с png напортачила. ;)

Клавиши в IE не работают (кроме закрытия пробелом). Хотелось бы и там стрелочки вправо-влево.

Да, не работают =)
Так и хочется ответить: «пользуйтесь ‘нормальными’ браузерами». Пожалуй попытаюсь это исправить вместе с глюком в Сафари… дал бы кто макинтош =)

Так я и пользуюсь нормальным файрфоксом. Но статистика пока неумолима.
Похоже у IE эти клавиши заранее назначены на другие функции- двигать скролл (если страница шире)

В IE все работает нормально, а в мазиле после подгрузки, изображение вылетает просто в отдельное окно. Ума не приложу, в чем может быть дело.

В IE все работает нормально, а в мазиле после подгрузки, изображение вылетает просто в отдельное окно.

Не знаю в чем дело, а Javascript включен?
Сейчас я немного поменял алгоритм открытия окна — скачайте обновление.

У меня в Firefox открывалось в отдельном окне, если после было не …rel=lightbox>, а …rel=lightbox />

KRUTO

Респект! Супер!

В IE (Firefox это не касается), если открыйть картинку, а за полупрозрачным фоном видны thumbnails других картинок, и на них нажимать, они тоже открываются, и фон становится все темнее и темнее. И потом надо будет все картинки закрывать. А если много thumbnail, люди могут от непонимания понажимать кучу раз. Хотелось бы, чтобы в IE было как в firefox: при открытии одной картинки задний план автоматически становится нерабочим и неактивным.
Вроде в оригинальной второй версии Lightbox этого нет.
Кстати, ожидается ли работа со стрелочками в IE?
PS. Надо бы еще в Опере проверить.

Пять килобайт – внушает.
Хорошо, что скрипт можно взять с «root/litebox.js».
Потому что ссылка для скачивания не работает.

bestann: работа со стрелочками видимо не ожидается — как я понял, там только с Ctrl они работают.
Про окна в IE — спасибо. Посмотрю если найду время. А в Опере все нормально.

pakt: Спасибо, теперь ссылка работает.

млин, а я не догадался взять с root. :-)
Классная штука! Огромное спасибо!

Возможно пригодится. Столкнулся с тем, что красивое окошко с картинкой «подлезает» под маленькую флешку у меня в заголовке страницы, что конечно же портило всю картину. Победил так

Давно и отлично все работает, за что большое спасибо. Проблема только одна: решительно не хочет показывать title. Перепробовал все возможные варианты написания, качал обновления, переустанавливал, но не желает. У всех остальных, и здесь в том числе, и у bestann – все отлично, но у меня не выводит ни при каких обстоятельствах.

Проблема только одна: решительно не хочет показывать title.

У Вас на сайте как-то странно прописаны ссылки на картинки: тег a закрывается перед тегом img. Может быть в этом дело?

Кстати да, почему «пробел», почему «x»?
Все пользователи компьютеров хорошо и надолго знают клавишу Esc..

Кстати да, почему «пробел», почему «x»?
Все пользователи компьютеров хорошо и надолго знают клавишу Esc

Ага, теперь можно и эскейпом. Просто изначально вообще никакими клавишами окно не управлялось — а пробел первым в голову пришел. Спасибо =)

bestann писала уже, если окно открыто и повторно кликнуть на маленькой картинке, то оно откроется еще раз. :( Пробовал в боди на онклик писать closeBox(); ошибку выдает (в принципе понятно, что трумб открывает и онклик в боди сразу закрыть пытается), может дописать, чтоб проверялось на открытое-закрытое окно?

Вроде решил… Не проверил если несколько картинок на странице, пойдет-непойдет?
function showBox(theTarget) {
if (document.getE­lementById(‘li­tebox’))
{
closeBox();
}
else {

сам скрипт шоубокс
}
}

Спасибо за скриптик! Штука полезная и лёгкая, но есть одна неувязочка. CSS не проходит валидацию из-за фильтра. Я понимаю, что на это можно конечно закрыть глаза, но всё же хотелось бы без ошибок.

В браузере Safari не работает переключение картинок с помощью клавиш влево-вправо

спасибо! ! !
зачетная штука :)

Спасибо. Дело даже не в минимализме, а в подходе.
Light – перезаписывает onclick элементов с нужным rel, а lite – ловит событие клик. Т.е. – более динамично.

Есть две проблемки, 1 – картинки открываются в отдельном окне до момента загрузки последней, и 2 – если файл большого объема, пользователь не может видеть что картинка находится на стадии загрузки.

Спасибо за лёгкий скрипт.

А можно, чтобы закрытие было еще и по клику по затемненной части окна?

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

Прошу прощения, Александр, но, возможно Вам пригодится. Все дело оказалось в скрипте nicetitle, который у меня стоял так давно, что я о нем забыл. Сегодня заменил его на другой и теперь litebox работает на ура.

Друзья, скрипт доработан автором сайта www.tarkovsky.su – Казармщиковым Александром
Сейчас переход к следующему изображению с помощью стрелочек на клавиатуре работает и IE (проверено в IE 6 и IE 7).

См. сам скрипт:
http://lossofsoul.com/…x/litebox.js

Пример работы:
http://lossofsoul.com/…aphorism.htm