Я думаю, что многие видели 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.
Пример использования:
<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>
Меня зовут Владимир, я программист-фрилансер, специализирующийся на Web-программировании и програмировании под Linux.
По совместительству занимаюсь администрированием LAMP/LNMP-серверов и техническим переводом.
Кстати, очень нужная и хорошая вещь! Автору большое спасибо!
интересный скрипт, но к сожалению скачать не получается(
Дмитрий, очень странно, у меня прямая ссылка работает: http://static2.sjinks.org.ua:8080/protobox.zip.
Отправил Вам архив по email.
Спасибо! Решились многие проблемы разом! Очень нужные фиксы, плагин замечательный!
Спасибо за отзыв! Кстати, есть версия ProtoBox и для WordPress, если вдруг нужно.
Большое спасибо…
Есть вопрос… как “включить” возможность защиты изображения путём наложения прозрачного GIF’а сверху ..))
Передать
protect: falseв настройкахНапример, так:
function()
{
initLightbox({ protect : false });
}
);