S3.Blog

22 Октября 2017
A A A   RSS-лента
"Я знаю, что ничего не знаю, но многие не знают и этого". Сократ [?].

JavaScript: Lytebox

Дата последнего изменения: 5 Октября 2009
Метки статьи: Готовые решения, Фиксы & Хаки, © Авторское, JavaScript
Очень популярным стало открытие картинки на сайте в слое поверх всего, не открывая дополнительных окон. Удобно, красиво, быстро, в общем супер. Родоначальником был 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+
     
  • ну и еще несколько изменений по мелочи...


Примеры:

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

  • скачайте: 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+


Ссылки


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




grin (гость) • ответить
Спасибо... наконец-то нашел)))
!!! Неужели так много писанины, для простого показа картинок???(это я про файл lytebox.js,)
Дмитрий (гость) • ответить
подскажите пожалуйста как поменять цвет фона, надписи и т.д? стоит синий, а нужен черный.
Александрответить
если просто на черный, то в 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 - обсудим более подробно

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

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

 



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