ProtoBox: LightBox 2 reloaded :-)

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

Новая версия известного LightBox 2 с большими возможностями

Я думаю, что многие видели 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> стало опциональным;
  • добавлена возможность полного отключения анимации (чтобы избежать зависимости от scriptaculous; тщательно не тестировалось).

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

  • упрощена разметка;
  • код полностью переписан;
  • вместо 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.

Добавить в закладки

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

10
Март
2008

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

  1. Gorkiy says:

    Владимир, прошу помощи.

    Использую у себя в блоге на wordpress плагин lightbox 2. Перерыл весь интернет, но не могу найти решения для моей проблемы.

    Мне очень нужна возможность скачивания картинки. Когда открывается картинка, хотелось бы иметь кнопочку “скачать” по аналогу “закрыть”. Это возможно?
    Заранее благодарю

    • Vladimir says:

      Только JavaScript’ом — вряд ли. Для скачивания необходимо, чтобы сервер прислал заголовок Content-Disposition, что сервер по умолчанию делать не будет.

  2. Gorgik says:

    Вопрос по поводу плагина - не работает на некоторых шаблонах WP… От чего это может происходить? Можете подсказать?

  3. Essensia says:

    Здравствуйте Владимир я типа начинающий lol вообщем :) вот не давно столкнулся с мыслью что надо бы делать портфолио себе, не много изучил Dreamweaver, все вроде хорошо но тут столкнулся с проблемой, - поскольку я занимаюсь графическим дизайном, мне нужно куда то помещать изображения, - я решил помещать их в swf но оказалась проблема, я не знаю языка, который не обходим (так мне в блоке на сайте одном сказали я вообще ни какого языка не знаю:)по мне это хорошо в дреаме вроде не плохо ориентируюсь - но пару раз слышал что программы вот эти вот которые сами все делают -туфта :) . Во общем копался, копался и случайно столкнулся с Lightbox меня привлекло, изображения в хорошем качестве открываются прямо нажав на них да так эффектно есть правда один не достаток *и можно скопировать * хотя я подозреваю что наверни ка есть защита:)
    У меня вопрос как или что нужно сделать чтобы был готовый LightBox типа просто вставь коринку:) через что можно сделать LightBox? и как его вставлять в дреам?.
    Заранее благодарю.

  4. Open says:

    Доброго времени суток!
    Владимир подскажите пожалуйста как сделать фотогаллерею,
    фотографии которой будут увеличиваться при наведении на них курсора.

    как сделать чтоб фотографии увеличивались плавно или с каким-то красивым эффектом ??

    • Vladimir says:

      Например,

      [-]
      View Code Javascript
      function setZoom(img, dir, width, height, margin, zIndex, delay) {
        setTimeout(function() {
          if (img.dir==dir) {
            img.style.width=width;
            img.style.height=height;
            img.style.margin=margin;
            img.style.zIndex=zIndex;
            img.parentNode.parentNode.style.zIndex=zIndex;
          }
        }, delay);
      }

      function larger(img, width, height) {
        img.dir='rtl';
        now=parseInt(img.style.zIndex);
        for (i=now+1; i<=10; i++) {
          w=(width*(10+i))/20+'px';
          h=(height*(10+i))/20+'px';
          m=(-i)+'px 0 0 '+(-width*i/40)+'px';
          setZoom(img, 'rtl', w, h, m, i, 20*(i-now));
        }
      }

      function smaller(img, width, height) {
        img.dir='ltr';
        now=parseInt(img.style.zIndex);
        for (i=now-1; i>=0; i--) {
          w=(width*(10+i))/20+'px';
          h=(height*(10+i))/20+'px';
          m=(-i)+'px 0 0 '+(-width*i/40)+'px';
          setZoom(img, 'ltr', w, h, m, i, 20*(now-i));
        }
      }
      [-]
      View Code HTML
      <img onmouseout="smaller(this,160,120)" onmouseover="larger(this,160,120)" alt="" src="..." dir="ltr"/>

      Копипаста с browsershots.org.

  5. Open says:

    Спасибо!! помогло !!

  6. Максим says:

    Владимир, день добрый!

    Прикрутил к сайту protobox, при просмотре в IE версий 6-8 (другие не проверял) в окне protobox снизу рамка с надписью close и крестиком срезана с боков пикселей на 10-20. Вторая проблема это то, что если просматривать фотографии не прокручивая страницу вниз, то черное поле за protobox’ом закрывает полностью экран, а если пролистать страницу вниз и вызвать protobox с нижних фотографий - черное поле срезается и закрывает только часть экрана сверху.
    Что посоветуете? Заранее спасибо!

    • Vladimir says:

      Максим, где смотреть?

      • Максим says:

        ммм, сорри, я думал из инфы комментария понятно будет. Извиняюсь.
        http://www.sunnypanthers.com

        • Максим says:

          Владимир, не дождался вашего совета, прикрутил к сайту стандартный лайтбокс, он медленнее, неудобнее, единственное что работает во всех браузерах правильно.

          • Vladimir says:

            Меня в стране не было — приходилось уезжать из-за дурацкого 90-дневного срока, а потом возвращаться

            Если вкратце: проблемы у Вас остались. В IE6 PrettyPhoto отображается крайне хреново (и кнопки не те). Проблема с оверлеем была в CSS. По поводу надписи Close — эта проблема давно исправлена, я просто не помню, что именно я исправлял (так как у Вас каким-то чудом оказалась старая версия кода, в которой еще есть функция getPageSize()). Если интересно, скачайте рабочий архив. У меня он работает во всех браузерах (при условии, что CSS сайта не конфликтует с CSS ProtoBox).

  7. Vladimir says:

    Обновил ProtoBox, новая версия здесь (или по ссылке в статье).

  8. Витя says:

    Здравствуйте, пробовал добавить плагин protobox (скопировал в папку плагины в вордпрес) однако вордпрес (2.8.3) его не видит, вордпрес

Подписаться на 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>

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

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