S3.Blog :: JavaScript: Lytebox

JavaScript: Lytebox

Дата последнего изменения: 5 Октября 2009
Метки статьи: , , ,

Хочешь отблагодарить автора или ускорить выпуск новых версий? Жми сюда!

Очень популярным стало открытие картинки на сайте в слое поверх всего, не открывая дополнительных окон. Удобно, красиво, быстро, в общем супер. Родоначальником был Lightbox, сейчас он называется LightBox2. Всё в нем хорошо, кроме одного - что бы LightBox заработал надо дополнительно подключить библиотеки prototype.js и scriptaculous.js, а я большой любитель автономных скриптов all-in-one, которые умеют делать то же, что и матёрые jQuery и Prototype собратья, но состоящие из одного файла.

После недолгих поисков был найден аналог: Lytebox , автор которого пишет:

Lytebox был написан на основе класса Lightbox, который создал Lokesh Dhakar (http://www.huddletogether.com). Цель состояла в том, чтобы написать отдельный объект, который устранил бы зависимость от prototype.js, effects.js, и scriptaculous.js.
Кроме того в Lytebox добавлены: "поддержка iFrame", "Демонстрация слайдов" и много вариантов конфигурации, которые позволяют настроить Lytebox так, как этого хотите именно Вы.

Но и этот вариант оказался не совсем идеален. Пришлось взять напильник и немного обработать код Lytebox

Мои изменения/Дополнения

оригинальный Lytebox позволяет выполнять навигацию по сгруппированным изображениям или через кнопки "Prev/Next", расположенные слева и справа окна (this.navType = 1), или через ссылки "<< prev | next >>", расположенные внизу (this.navType = 2)
Я добавил третий тип (this.navType = 3), который объединяет первые два
исправлена ошибка в Lytebox, которая приводила к остановке работы, если на странице сайта есть iFrame, в котором так же был вызов Lytebox
добавлено сохранение и последующее восстановление события body.onscroll после окончания работы Lytebox, на случай, если какое-то javascript-приложение его использует
исправлена ошибка при инициализации Lytebox, которая происходила, если обрабатываемые теги <A> находились внутри фрейма
если страница сайта достаточно большая по высоте, то в оригинальном Lytebox, открываемое окно просмотра изображений скроллировалось вместе с сайтом.
Я исправил эту несуразность.
в режиме Lyteframe можно было случайно закрыть окно, кликнув мимо него.
теперь в этом режиме окно закроется, только нажав кнопку "Close"
добавлено выставление размера окна в процентах
добавлен идентификатор ("request_from=lytebox") для скрипта, находящегося на сервере, который указывает на то, что запрос пришел из окна Lytebox
исправлено отображение фонового слоя в Internet Explorer 7 и 8
номер версии исправлен на 3.22+
ну и еще несколько изменений по мелочи...

Примеры:

Отдельное изображение
Группа изображений
Слайдшоу
HTML Content
- Одна ссылка
  Искать в Yahoo!
- Сгруппированные ссылки
  M31 - Галактика Andromeda
  M42 - Orion Nebula

Использование

скачайте: lytebox.3.22.plus.zip

добавьте на вашу web-страницу нижеследующие строчки

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

добавьте необходимые аттрибуты в ссылки, например:

Отдельное изображение

<a href="images/image-1.jpg" rel="lytebox" title="Image Description">Image #1</a>

Группа изображений

<a href="images/image-1.jpg" rel="lytebox[vacation]" title="Mom and Dad">Mom and Dad</a>
<a href="images/image-2.jpg" rel="lytebox[vacation]" title="My Sister">My Sister</a>

Слайдшоу

<a href="images/image-1.jpg" rel="lyteshow[vacation]" title="Mom and Dad">Mom and Dad</a>
<a href="images/image-2.jpg" rel="lyteshow[vacation]" title="My Sister">My Sister</a>

HTML Content

Одна ссылка

<a href="http://www.yahoo.com" rel="lyteframe" rev="width: 400px; height: 300px;">Yahoo Search</a>

Сгруппированные ссылки

<a href="catalog1.htm" rel="lyteframe[catalog]" title="Summer Catalog">Summer Catalog</a>
<a href="catalog1.htm" rel="lyteframe[catalog]" title="Winter Catalog">Winter Catalog</a>

Список настроек: configurations.html

Совместимость с браузерами

IE 5.5+
Firefox 1.5+
Opera 9.23+

Ссылки

Lytebox: http://www.dolem.com/lytebox/
Lightbox: http://www.lokeshdhakar.com/projects/lightbox2/
Lightbox и его клоны: http://dustweb.ru/log/2008/07/17/lightbox_n_clones/
The Lightbox Clones Matrix: http://planetozh.com/projects/lightbox-clones/

Авторизоваться :: Зарегистрироваться :: Комментарии в RSS
Комментарии: все 4 3 2 1

14 Февраля 2018 (11:57:33)

Евгений (гость) • ответить

Александр, ну супер, большое спасибо! Буду пробовать... Если все сработает - будет на сайте очень гармонично смотреться лийтбокс со всеми этими дополнениями. (будут вопросы - напишу)

14 Февраля 2018 (12:02:49)

Евгений (гость) • ответить

Кстати, сразу есть вопрос, который давно меня интересует, тоже очень. Хотелось бы этот лийтбокс использовать вместо модальных окон на сайет. К примеру, только на главной странице, время от времени проводятся акции с сезонными и праздничными скидками. Как организовать через лийтбокс его всплывание через секунд 5-7, где внутри всплывшего окошка будет вставлена акционная хтмлстраница или изображение. Чтобы пользователь потом просто его закрыл - в общем как везде, только чтобы через наш любимый лайтбокс все это прошло. (желательно чтобы это срабатывало и на ИЕ 6 так же как в хроме 258

)

15 Февраля 2018 (19:02:52)

Александр • ответить

Самое простое - это так:
внутри своего html размести ссылку из примера в статье, и назначь ей id, например так:

<a id="test_link" href="https://yahoo.com" rel="lyteframe" rev="width: 400px; height: 300px;">Yahoo</a>

можно ссылку спрятать назначив стиль: display: none

а в самом низу страницы размести этот код:

<script type="text/javascript">
setTimeout(function(){
document.getElementById('test_link').onclick();
}, 5000);
</script>

через 5 секунд после загрузки страницы будет открыт фрейм с яху-сайтом
так же можно вместо ссылки на яху указывать изображения и всё остальное, что описано в статье.

16 Февраля 2018 (02:04:08)

Евгений (гость) • ответить

АААААААААААА, вот это тоже оочень круто! Спасибо, буду пробовать оба варианта! Как же великолепно, что есть ваш сайт и, что вы отвечаете на такие нестандартные вопросы подробно с примером! Спасибо еще раз. Уверен, что многим тоже будет полезно все это знать, просто они не думали, что можно свои догадки и пожелания спросить и получить исчерпывающий ответ.
- Маленький отчет по предыдущим вопросам и ответам: уже перенес наверх панельку с кнопкой закрыть и описанием и убрал внешнюю рамку. Совсем другой вид, совсем другое настроение от всплывающего окошка. Пока не могу нарадоваться на это изменение, остальные буду примерять и применять, как немного улягутся личные страсти по первому "достижению"!

все пункты мне очень полезны и все их, я точно знаю, что буду применять в зависимости от сайтов, а так же добавлю в уже готовые, на которых мне эти изменения "виделись" как очень нужные для гармоничности.
5 сайту, 5 автору-модератору в дневник, с занесением в журнал.

)

16 Февраля 2018 (02:10:38)

Александр • ответить

Спасибо и удачи!

23 Февраля 2018 (22:00:37)

Евгений (гость) • ответить

РРРРРРРРРРРААботает!!!!!!!!!!

28 Марта 2018 (13:03:43)

Евгений (гость) • ответить

Привет! Вот еще мысль в голову забралась. Когда на мобильном смотришь группу изображений, не всегда понятно, что можно листать дальше. и только либо нажав на картинку справа, либо увидев мелкую надпись "изображение 1 из 6" можно понять что можно листать. Как осуществить постоянное показывание срелок-картинок "пред след", а не появление по наведению курсором? Особено если попадаешь среди простых увеличений картинки на группу, которая может и не видна просто на странице - можно и пропустить интересное.

(недавно сбрасывал еще почту, там тоже интересный вопрос. потом его здесь надо будет осветить тоже)

12 Апреля 2018 (20:18:48)

Александр • ответить

lytebox.css
ищи

#lbNext { width: 49%; height: 100%; background: transparent url(/img/lytebox/blank.gif) no-repeat; display: block; right: 0; float: right; }
	#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(/img/lytebox/next_grey.gif) right 15% no-repeat; }
	#lbNext.red:hover, #lbNext.red:visited:hover { background: url(/img/lytebox/next_red.gif) right 15% no-repeat; }
	#lbNext.green:hover, #lbNext.green:visited:hover { background: url(/img/lytebox/next_green.gif) right 15% no-repeat; }
	#lbNext.blue, #lbNext.blue:hover, #lbNext.blue:visited:hover { background: url(/img/lytebox/next_blue.gif) right 15% no-repeat; }
	#lbNext.gold:hover, #lbNext.gold:visited:hover { background: url(/img/lytebox/next_gold.gif) right 15% no-repeat; }

и перед #lbNext.xxxxxx:hover добавь #lbNext.xxxxx
например:

#lbNext.grey, #lbNext.grey:hover, #lbNext.grey:visited:hover {

тоже самое для #lbPrev

16 Апреля 2018 (21:31:50)

Евгений (гость) • ответить

Александр, спасибо!. Да, так получилось! Стрелки висят, не попадают. Уже немного понимаю зачем эти добавки в #lbNext и #lbPrev. Это чтобы указать, что и в состоянии покоя (без ховеров, онпрессов, онрелизов, онмаусоверов и визитедов) показывать фоном в этом месте стрелку.

Спасибо еще раз!. Для просмотра группы изображений с телефона постоянное отображение стрелок - незаменимая штука!

16 Апреля 2018 (21:33:25)

Евгений (гость) • ответить

я схитрил чуть, сделал второй цсс с этими добавками. оригинал в запасе