S3.Blog

19 Марта 2024
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+


Ссылки


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




Евгений (гость) • ответить
Александр, ну супер, большое спасибо! Буду пробовать... Если все сработает - будет на сайте очень гармонично смотреться лийтбокс со всеми этими дополнениями. (будут вопросы - напишу)
Евгений (гость) • ответить
Кстати, сразу есть вопрос, который давно меня интересует, тоже очень. Хотелось бы этот лийтбокс использовать вместо модальных окон на сайет. К примеру, только на главной странице, время от времени проводятся акции с сезонными и праздничными скидками. Как организовать через лийтбокс его всплывание через секунд 5-7, где внутри всплывшего окошка будет вставлена акционная хтмлстраница или изображение. Чтобы пользователь потом просто его закрыл - в общем как везде, только чтобы через наш любимый лайтбокс все это прошло. (желательно чтобы это срабатывало и на ИЕ 6 так же как в хроме 258 )
Александрответить
Самое простое - это так:
внутри своего 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 автору-модератору в дневник, с занесением в журнал. )
Александрответить
Спасибо и удачи!
Евгений (гость) • ответить
РРРРРРРРРРРААботает!!!!!!!!!!
Евгений (гость) • ответить
Привет! Вот еще мысль в голову забралась. Когда на мобильном смотришь группу изображений, не всегда понятно, что можно листать дальше. и только либо нажав на картинку справа, либо увидев мелкую надпись "изображение 1 из 6" можно понять что можно листать. Как осуществить постоянное показывание срелок-картинок "пред след", а не появление по наведению курсором? Особено если попадаешь среди простых увеличений картинки на группу, которая может и не видна просто на странице - можно и пропустить интересное. (недавно сбрасывал еще почту, там тоже интересный вопрос. потом его здесь надо будет осветить тоже)
Александрответить
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
Евгений (гость) • ответить
Александр, спасибо!. Да, так получилось! Стрелки висят, не попадают. Уже немного понимаю зачем эти добавки в #lbNext и #lbPrev. Это чтобы указать, что и в состоянии покоя (без ховеров, онпрессов, онрелизов, онмаусоверов и визитедов) показывать фоном в этом месте стрелку. Спасибо еще раз!. Для просмотра группы изображений с телефона постоянное отображение стрелок - незаменимая штука!
Евгений (гость) • ответить
я схитрил чуть, сделал второй цсс с этими добавками. оригинал в запасе

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

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

 



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