ProtoBox: LightBox 2 reloaded :-)

Vladimir
Опубликовано в: JavaScript

Я думаю, что многие видели LightBox 2 в действии. Но вот парадокс: заказчикам/пользователям он нравится (ох уж эти дешевые эффекты :-) ), а вот многие программисты терпеть его не могут. Мне пришлось несколько раз столкнуться с LightBox (просто интегрировать его в приложение, написанное индусами). Но один раз мне понадобилось модифицировать кое-какое поведение скрипта, и я залез внутрь...
Из того, что мне ужасно не понравилось: LightBox использует библиотеку Prototype, но написан совершенно не в ее стиле - больше напоминает хаотичный набор функций. Вторая неприятная особенность - повторное изобретение велосипеда: многие функции, существующие в Prototype, зачем-то были написаны заново :-) Я, конечно, понимаю, что в предыдущих версиях Prototype таких функций, возможно, не было, но ведь прогресс не стоит на месте :-). Разметка, которую генерирует LightBox тоже очень несовершенна —видимо, Lokesh Dhakar не очень дружит с CSS. Но самое неприятное: использование обработчиков событий из DOM0 (например, element.onclick = function() { }). Интересно, для чего Prototype реализует Event.observe/Event.stopObserving? Ведь использование методов DOM2 для работы с событиями более удобно (и в плане расширяемости скрипта)!

Есть и мелкие баги: известно, что в Internet Explorer 6 не очень просто перекрыть <select> каким-нибудь HTML-элементом (по умолчанию <select> все равно будет сверху). Для этого в LightBox реализованы функции hideSelectBoxes()/showSelectBoxes() (и аналогичные для элементов <object> и <embed>). Казалось бы, все хорошо, но... проблемы появились, когда на странице присутствовали элементы <select> с visibility: hidden. LightBox их открыл. Аналогично со скрытыми элементами <object>.

Казалось бы, что это всё мелочи… Согласен, но когда таких мелочей очень много, и для добавления простой функциональности приходится переписывать большие куски кода, это очень раздражает. Пришлось переписать :-)

Из новой функциональности:

  • возможность перетаскивания окна с картинкой (из разряда "дешевые эффекты"; для этого требуется наличие dragdrop.js из Scriptaculous);
  • возможность прсмотра изображений по кольцу (после последнего изображения идёт первое);
  • возможность использования существующего оверлея (тот самый затемнённый экран);
  • возможность задания максимальной высоты и ширины изображения (пока в пикселях);
  • возможность защиты изображения путём наложения прозрачного GIF'а сверху (ну очень уж заказчик настаивал);
  • скрывание <object>/<embed> стало опциональным.

Улучшения по сравнению с оригиналом:

  • упрощена разметка;
  • код полностью переписан;
  • вместо ID используются классы;
  • отпала необходимость скрывать <select> для IE6.

Еще одно достоинство — код полностью совместим с оригинальным LightBox 2.

Пример использования:

[-]
View Code HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Usage Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--[if IE]>
   <script type="text/javascript" defer="true" id="init_js" src="javascript://"></script>
<![endif]-->
    <link href="protobox.css" rel="stylesheet" type="text/css" />
    <script src="prototype.js" type="text/javascript"></script>
    <script type="text/javascript" src="effects.js"></script>
    <script type="text/javascript" src="builder.js"></script>
    <script type="text/javascript" src="dragdrop.js"></script>
    <script type="text/javascript" src="odl.js"></script>
    <script type="text/javascript" src="protobox.js"></script>
<!--[if lte IE 6]>
   <link rel="stylesheet" type="text/css" href="iefixes.css"/>
<![endif]-->
<style type="text/css">/*<![CDATA[*/
   html, body { margin: 0; padding: 0; border: 0}
   a img { border: 0 }
   /*]]>*/
    </style>
</head>
<body>
    <a href="photos/photo1.jpg" rel="lightbox"><img src="photos/thumb1.jpg" alt="" /></a>
    <a href="photos/photo2.jpg" rel="lightbox"><img src="photos/thumb2.jpg" alt="" /></a>
    <a href="photos/fphoto1.jpg" rel="lightbox[gallery]" title="Image 1"><img src="photos/fthumb1.jpg" alt="" /></a>
    <a href="photos/fphoto2.jpg" rel="lightbox[gallery]" title="Image 2"><img src="photos/fthumb2.jpg" alt="" /></a>

<script type="text/javascript">//<![CDATA[
   function onDomLoaded()
   {
       initLightbox(
           {
               ring    : true,
               protect : true
           }
       );
   }

   odl.register(onDomLoaded);
//]]>
</script>
</body>
</html>

Скачать ProtoBox.

Добавить в закладки
  • del.ici.ous
  • Digg
  • Furl
  • Google
  • Simpy
  • Spurl
  • Y! MyWeb
  • БобрДобр
  • Мистер Вонг
  • Yandex.Закладки
  • Текст 2.0
  • News2
  • AddScoop
  • RuSpace
  • RUmarkz
  • Memori
  • Google Bookmarks
  • Писали
  • СМИ 2
  • Моё Место
  • 100 Закладок
  • Ваау!
  • Technorati
  • RuCity
  • LinkStore
  • NewsLand
  • Lopas
  • Закладки - IN.UA
  • Connotea
  • Bibsonomy
  • Trucking Bookmarks
  • Communizm
  • UCA
  • Slashdot
  • Magnolia
  • Blogmarks
  • Current
  • Meneame
  • Oknotizie
  • Diigo
  • Funp
  • Hugg
  • Dealspl.us
  • N4G
  • Mister Wong
  • Faves
  • Yigg
  • Fresqui
  • Care2
  • Kirtsy
  • Sphinn

Связанные записи

10
Март
2008

Комментарии к статье «ProtoBox: LightBox 2 reloaded :-)» (9)  »

  1. Tigress says:

    Кстати, очень нужная и хорошая вещь! Автору большое спасибо! :-)

  2. дмитрий says:

    интересный скрипт, но к сожалению скачать не получается(

  3. Vladimir says:

    Дмитрий, очень странно, у меня прямая ссылка работает: http://static2.sjinks.org.ua:8080/protobox.zip.

    Отправил Вам архив по email.

  4. Paul_K says:

    Спасибо! Решились многие проблемы разом! Очень нужные фиксы, плагин замечательный!

  5. Vladimir says:

    Спасибо за отзыв! Кстати, есть версия ProtoBox и для WordPress, если вдруг нужно.

  6. Дмитрий says:

    Большое спасибо…
    Есть вопрос… как “включить” возможность защиты изображения путём наложения прозрачного GIF’а сверху ..))

Подписаться на RSS-ленту комментариев к статье «ProtoBox: LightBox 2 reloaded :-)» Trackback URL: http://blog.sjinks.org.ua/javascript/4-protobox-lightbox-reloaded/trackback/

Оставить комментарий к записи «ProtoBox: LightBox 2 reloaded :-)»

Вы можете использовать данные тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Оставляя комментарий, Вы выражаете своё согласие с Правилами комментирования.

Подписаться, не комментируя