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

2006-03-13 перейти к комментариям

Litebox JS

english version

Lightbox

Не так давно наткнулся на чудесный скрипт 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-х килобайт). Я всегда любил минимализм, поэтому этот вариант мне понравился. Кроме того, скрипт Камерона имел интересную особенность — позволял просматривать все картинки на странице последовательно, не закрывая модального окна.

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

Моя версия

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

Примеры

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

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.zip (версия от 2006-08-18)

History

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:

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.

Теги: ,

Комментарии RSS для комментариев

  1. # Arsart — 1424 дн. назад:

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

  2. # VYu — 1422 дн. назад:

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

  3. # Spr!tE — 1422 дн. назад:

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

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

  4. # frst — 1420 дн. назад:

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

  5. # Spr!tE — 1420 дн. назад:

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

  6. # kpumuk — 1410 дн. назад:

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

  7. # Spr!tE — 1410 дн. назад:

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

  8. # Vitalie — 1401 дн. назад:

    не плохо

  9. # bestann — 1400 дн. назад:

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

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

  10. # bestann — 1400 дн. назад:

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

  11. # Spr!tE — 1400 дн. назад:

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

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

  12. # bestann — 1400 дн. назад:

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

  13. # Spr!tE — 1399 дн. назад:

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

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

  14. # bestann — 1399 дн. назад:

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

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

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

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

  15. # Spr!tE — 1399 дн. назад:

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

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

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

  16. # bestann — 1398 дн. назад:

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

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

  17. # bestann — 1398 дн. назад:

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

  18. # bestann — 1377 дн. назад:

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

  19. # Spr!tE — 1376 дн. назад:

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

  20. # bestann — 1375 дн. назад:

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

  21. # Pepsimist — 1372 дн. назад:

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

  22. # Spr!tE — 1371 дн. назад:

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

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

  23. # bestann — 1368 дн. назад:

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

  24. # Deus17 — 1353 дн. назад:

    KRUTO

  25. # me2you — 1352 дн. назад:

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

  26. # bestann — 1323 дн. назад:

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

  27. # pakt — 1314 дн. назад:

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

  28. # Александр Шабуневич — 1314 дн. назад:

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

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

  29. # Игорь Фролов — 1309 дн. назад:

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

  30. # Игорь Фролов — 1309 дн. назад:

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

  31. # Pepsimist — 1273 дн. назад:

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

  32. # Александр Шабуневич — 1273 дн. назад:

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

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

  33. # Vital — 1271 дн. назад:

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

  34. # Александр Шабуневич — 1270 дн. назад:

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

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

  35. # Роман — 1234 дн. назад:

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

  36. # Роман — 1234 дн. назад:

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

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

  37. # Владимир — 1215 дн. назад:

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

  38. # bookworm — 1078 дн. назад:

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

  39. # Eduard — 1075 дн. назад:

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

  40. # Gram — 1064 дн. назад:

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

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

Что вы об этом думаете?

Помощь по Textile, gravatar

Gravatar и Textpattern Разработка с веб-стандартами