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

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

А я вот не понял. После всплытия большой первой картинки – ни тебе вернуться кнопкой браузера 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