S3.Blog :: JavaScript: Lytebox

подробнее
JavaScript: Lytebox

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

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

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

Авторизоваться :: Зарегистрироваться :: Комментарии в 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)

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

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