JavaScript: Lytebox
Дата последнего изменения: 5 Октября 2009
Метки статьи: Готовые решения, Фиксы & Хаки, JavaScript, © Авторское
Метки статьи: Готовые решения, Фиксы & Хаки, JavaScript, © Авторское
Очень популярным стало открытие картинки на сайте в слое поверх всего, не открывая дополнительных окон. Удобно, красиво, быстро, в общем супер. Родоначальником был Lightbox, сейчас он называется LightBox2 . Всё в нем хорошо, кроме одного - что бы LightBox заработал надо дополнительно подключить библиотеки prototype.js и scriptaculous.js , а я большой любитель автономных скриптов all-in-one, которые умеют делать то же, что и матёрые jQuery и Prototype собратья, но состоящие из одного файла.
Похожие материалы:
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); }
this.theme = 'blue'; // themes: grey (default), red, green, blue, gold
вот меняете там значение на одно из предложенных.
а если хотите с изысками, что б было не похоже на всех остальных, то редактируйте файл стилей lytebox.css