JavaScript: Lytebox
Дата последнего изменения: 5 Октября 2009
Метки статьи: Готовые решения, Фиксы & Хаки, JavaScript, © Авторское
Метки статьи: Готовые решения, Фиксы & Хаки, JavaScript, © Авторское
Очень популярным стало открытие картинки на сайте в слое поверх всего, не открывая дополнительных окон. Удобно, красиво, быстро, в общем супер. Родоначальником был Lightbox, сейчас он называется LightBox2 . Всё в нем хорошо, кроме одного - что бы LightBox заработал надо дополнительно подключить библиотеки prototype.js и scriptaculous.js , а я большой любитель автономных скриптов all-in-one, которые умеют делать то же, что и матёрые jQuery и Prototype собратья, но состоящие из одного файла.
Похожие материалы:
17 Октября 2009 (23:00:21)
Сергей
(гость)
• ответить
...Понял!!! Все впо ссылке configurations.html на этой странице (это я для таких же "чайников" отписал)
Но в Мозиле ваша замечательная добавка this.navType = 3 - не появляется!!! А жаль... Может опять я чего не длглняю?
С уважением
Но в Мозиле ваша замечательная добавка this.navType = 3 - не появляется!!! А жаль... Может опять я чего не длглняю?
С уважением
17 Октября 2009 (23:31:24)
Сергей
(гость)
• ответить
Спасибо!
А как сделать, чтобы в режиме rel="lyteshow[vacation]" . при открытии картинки Слайдшоу не запускалось автоматически, а только после нажатия Play? Вот тогда, наверное и будет счастье
А как сделать, чтобы в режиме rel="lyteshow[vacation]" . при открытии картинки Слайдшоу не запускалось автоматически, а только после нажатия Play? Вот тогда, наверное и будет счастье
файл lytebox.js, строка 381
Если пользователь кликнул не на первую картинку слайда, то в слайдшоу автоматически поставить паузу, иначе начать показывать слайды
замените её на эту:
теперь при клике на любую картинку слайдшоу не запустится, пока пользователь не нажмет на Play
Если пользователь кликнул не на первую картинку слайда, то в слайдшоу автоматически поставить паузу, иначе начать показывать слайды
this.isPaused = (this.slideNum != 0 ? true : false);
замените её на эту:
this.isPaused = true;
теперь при клике на любую картинку слайдшоу не запустится, пока пользователь не нажмет на Play
12 Марта 2010 (06:37:57)
Валерий
(гость)
• ответить
Приведите пример (превьюшка) 80х60 при нажатии запускался lytebox а то по примеру
<a href="images/image-1.jpg" rel="lytebox" title="Image Description">Image #1</a>только как ссылка.
12 Мая 2010 (23:29:22)
grin
(гость)
• ответить
Спасибо... наконец-то нашел)))
!!! Неужели так много писанины, для простого показа картинок???(это я про файл lytebox.js,)
!!! Неужели так много писанины, для простого показа картинок???(это я про файл lytebox.js,)
7 Января 2011 (22:07:47)
Дмитрий
(гость)
• ответить
подскажите пожалуйста как поменять цвет фона, надписи и т.д? стоит синий, а нужен черный.
7 Января 2011 (22:36:38)
Дмитрий
(гость)
• ответить
Подскажите почему не появляется крестик закрытия? В нижнем правом углу ничего нету, хотя при наведении курсор активируется. Спасибо.
У меня, допустим, ие8, но креста в правом нижнем нет... Отключить бановырезалки, спам фильтры и т.д.? Хм... Почему-то на Вашем сайте работает без отключения, а у меня на копьютере (в локальном режиме) надо отключать? А как я буду об этом посетителей своего сайта предупреждать? - Мол зашедшие ко мне на сайт, просьба колющие, режущие и прочие интсрументы отключить! 
7 Мая 2011 (22:31:49)
tylerfg
• ответить
Помогите, пожалуйста: у меня в index.html вызывается несколько фреймов, в центральном фрейме само содержание. Я пробовал прописывать <script type=... src="lytebox.js">...<link ... href="lytebox.css" ... />
и в index'е, и только во фрейме (top.html), и и там, и там, но у меня lytebox не пашет, а открывает картинку во весь top.html.
В джумле, конечно, никаких проблем нет с лайтбоксом (там сайт без фреймов), а вот тут незадача.(
и в index'е, и только во фрейме (top.html), и и там, и там, но у меня lytebox не пашет, а открывает картинку во весь top.html.
В джумле, конечно, никаких проблем нет с лайтбоксом (там сайт без фреймов), а вот тут незадача.(
4 Февраля 2018 (00:10:40)
Евгений
(гость)
• ответить
Александр, добрый день. Всегда были вопросы к этому скрипту, хотя использую только его!
1) Подскажите как убрать толщину белой рамки в 12 пикселов? this.borderSize = 12; так чтобы вокруг выдаваемого изображения не было белой рамки или она была бы равна 0, а внизу оставалась белая полоска для надписей и кнопки закрыть. автор советует при изменении этой опции лезть в цсс и что-то соответственно менять, но что? где точно? можно примером?
2) Можно ли перенести нижнюю белую рамку с надписями подсказок и кнопкой закрыть противоположно наверх? Если да, то прошу оочень подробно рассказать как.
3) Можно ли всплывающему окну, которое всплывает сейчас, без изменений о которых я писал выше, поставить фон. Вообще фон на весь размер окна. Вместо белых полей чтобы был установленный мной фон либо в цсс либо фон картинкой. Поподробнее плиииз!
1) Подскажите как убрать толщину белой рамки в 12 пикселов? this.borderSize = 12; так чтобы вокруг выдаваемого изображения не было белой рамки или она была бы равна 0, а внизу оставалась белая полоска для надписей и кнопки закрыть. автор советует при изменении этой опции лезть в цсс и что-то соответственно менять, но что? где точно? можно примером?
2) Можно ли перенести нижнюю белую рамку с надписями подсказок и кнопкой закрыть противоположно наверх? Если да, то прошу оочень подробно рассказать как.
3) Можно ли всплывающему окну, которое всплывает сейчас, без изменений о которых я писал выше, поставить фон. Вообще фон на весь размер окна. Вместо белых полей чтобы был установленный мной фон либо в цсс либо фон картинкой. Поподробнее плиииз!
1. lytebox.css
#lbImageContainer, #lbIframeContainer { padding: 10px; }
2. lytebox.js
найти: objLytebox.appendChild(objDetailsContainer);
заменить на: objLytebox.insertBefore(objDetailsContainer, objLytebox.firstChild);
и немного подкрутить lytebox.css для #lbDetailsContainer
3. lytebox.css
#lbOverlay { background-image: url(http://путь-к-картинке.jpg); }
#lbImageContainer, #lbIframeContainer { padding: 10px; }
2. lytebox.js
найти: objLytebox.appendChild(objDetailsContainer);
заменить на: objLytebox.insertBefore(objDetailsContainer, objLytebox.firstChild);
и немного подкрутить lytebox.css для #lbDetailsContainer
3. lytebox.css
#lbOverlay { background-image: url(http://путь-к-картинке.jpg); }
Кстати, сразу есть вопрос, который давно меня интересует, тоже очень. Хотелось бы этот лийтбокс использовать вместо модальных окон на сайет. К примеру, только на главной странице, время от времени проводятся акции с сезонными и праздничными скидками. Как организовать через лийтбокс его всплывание через секунд 5-7, где внутри всплывшего окошка будет вставлена акционная хтмлстраница или изображение. Чтобы пользователь потом просто его закрыл - в общем как везде, только чтобы через наш любимый лайтбокс все это прошло. (желательно чтобы это срабатывало и на ИЕ 6 так же как в хроме 258 
)
)Самое простое - это так:
внутри своего html размести ссылку из примера в статье, и назначь ей id, например так:
можно ссылку спрятать назначив стиль: display: none
а в самом низу страницы размести этот код:
через 5 секунд после загрузки страницы будет открыт фрейм с яху-сайтом
так же можно вместо ссылки на яху указывать изображения и всё остальное, что описано в статье.
внутри своего 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 секунд после загрузки страницы будет открыт фрейм с яху-сайтом
так же можно вместо ссылки на яху указывать изображения и всё остальное, что описано в статье.
АААААААААААА, вот это тоже оочень круто! Спасибо, буду пробовать оба варианта! Как же великолепно, что есть ваш сайт и, что вы отвечаете на такие нестандартные вопросы подробно с примером! Спасибо еще раз. Уверен, что многим тоже будет полезно все это знать, просто они не думали, что можно свои догадки и пожелания спросить и получить исчерпывающий ответ.
- Маленький отчет по предыдущим вопросам и ответам: уже перенес наверх панельку с кнопкой закрыть и описанием и убрал внешнюю рамку. Совсем другой вид, совсем другое настроение от всплывающего окошка. Пока не могу нарадоваться на это изменение, остальные буду примерять и применять, как немного улягутся личные страсти по первому "достижению"! все пункты мне очень полезны и все их, я точно знаю, что буду применять в зависимости от сайтов, а так же добавлю в уже готовые, на которых мне эти изменения "виделись" как очень нужные для гармоничности.
5 сайту, 5 автору-модератору в дневник, с занесением в журнал.)
- Маленький отчет по предыдущим вопросам и ответам: уже перенес наверх панельку с кнопкой закрыть и описанием и убрал внешнюю рамку. Совсем другой вид, совсем другое настроение от всплывающего окошка. Пока не могу нарадоваться на это изменение, остальные буду примерять и применять, как немного улягутся личные страсти по первому "достижению"!
все пункты мне очень полезны и все их, я точно знаю, что буду применять в зависимости от сайтов, а так же добавлю в уже готовые, на которых мне эти изменения "виделись" как очень нужные для гармоничности.5 сайту, 5 автору-модератору в дневник, с занесением в журнал.
)
28 Марта 2018 (13:03:43)
Евгений
(гость)
• ответить
Привет! Вот еще мысль в голову забралась. Когда на мобильном смотришь группу изображений, не всегда понятно, что можно листать дальше. и только либо нажав на картинку справа, либо увидев мелкую надпись "изображение 1 из 6" можно понять что можно листать. Как осуществить постоянное показывание срелок-картинок "пред след", а не появление по наведению курсором? Особено если попадаешь среди простых увеличений картинки на группу, которая может и не видна просто на странице - можно и пропустить интересное. (недавно сбрасывал еще почту, там тоже интересный вопрос. потом его здесь надо будет осветить тоже)
(недавно сбрасывал еще почту, там тоже интересный вопрос. потом его здесь надо будет осветить тоже)lytebox.css
ищи
и перед #lbNext.xxxxxx:hover добавь #lbNext.xxxxx
например:
тоже самое для #lbPrev
ищи
#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)
Евгений
(гость)
• ответить
я схитрил чуть, сделал второй цсс с этими добавками. оригинал в запасе
С уважением,