S3.Blog

29 Марта 2024
A A A   RSS-лента
"Я знаю, что ничего не знаю, но многие не знают и этого". Сократ [?].

JavaScript: Lytebox

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


Похожие материалы:




Александрответить
если просто на черный, то в lytebox.js в самом начале есть строка:
this.theme = 'blue'; // themes: grey (default), red, green, blue, gold

вот меняете там значение на одно из предложенных.
а если хотите с изысками, что б было не похоже на всех остальных, то редактируйте файл стилей lytebox.css
Дмитрий (гость) • ответить
Подскажите почему не появляется крестик закрытия? В нижнем правом углу ничего нету, хотя при наведении курсор активируется. Спасибо.
Александрответить
начнем с того - какой у вас браузер? проверил в ие7, ие8 и фф - все ок.
второй вопрос: банерорезалки, антивирусы со всякими спам-фильтрами и т.д. стоят? А что будет если их отключить? Крестик появится?
Борис (гость) • ответить
У меня, допустим, ие8, но креста в правом нижнем нет... Отключить бановырезалки, спам фильтры и т.д.? Хм... Почему-то на Вашем сайте работает без отключения, а у меня на копьютере (в локальном режиме) надо отключать? А как я буду об этом посетителей своего сайта предупреждать? - Мол зашедшие ко мне на сайт, просьба колющие, режущие и прочие интсрументы отключить!
Александрответить
а у меня на копьютере (в локальном режиме)

скорее всего у вас не верные пути на картинки, которые прописываются в файле стилей lytebox.css
tylerfgответить
Помогите, пожалуйста: у меня в index.html вызывается несколько фреймов, в центральном фрейме само содержание. Я пробовал прописывать <script type=... src="lytebox.js">...<link ... href="lytebox.css" ... />
и в index'е, и только во фрейме (top.html), и и там, и там, но у меня lytebox не пашет, а открывает картинку во весь top.html.
В джумле, конечно, никаких проблем нет с лайтбоксом (там сайт без фреймов), а вот тут незадача.(
tylerfgответить
и еще: на джумле у меня часы на javascript используются (Clock3D.class), в общем, открывающийся лайтбокс их не затеняют и они выводятся прямо поверх картинки. Можно ли как-то решить подобную проблему?
Александрответить
Извините, но я не совсем понял суть проблемы с ифреймом.
напишите мне на емейл s3 [гав] smtp.ru - обсудим более подробно
Евгений (гость) • ответить
Александр, добрый день. Всегда были вопросы к этому скрипту, хотя использую только его!
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); }

 
 
  Имя *:   Решите пример *: =
 
Полужирный Курсив Подчеркнутый Перечеркнутый
 
Вставить изображение Сделать цитатой Вставить ссылку Вставить код

Вставить смайл
 
 

 



© S3.Blog: Если критикуешь, не предлагая решения проблемы, то ты становишься частью этой проблемы.