ProtoBox: LightBox 2 reloaded :-)
Новая версия известного 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.
Пример использования:
<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>
Мар
2008
Комментарии к статье «ProtoBox: LightBox 2 reloaded :-)» (45) »
Пожалуйста, не используйте эту форму для комментирования! Данная форма предназначена исключительно для ботов.
Оставить комментарий к записи «ProtoBox: LightBox 2 reloaded :-)»
गते गते पारगते पारसंगते बोधि स्वाहा
Меня зовут Владимир, я программист-фрилансер, специализирующийся на Web-программировании и програмировании под Linux.
По совместительству занимаюсь администрированием LAMP/LNMP-серверов и техническим переводом.
Сдается мне, что этот момент нужно подправить
На длинных (высоких) страницах окошко убегает вниз.
Изменил на примерно такой код
function screenHeight()
{
var h; // высота
h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
return h;
}
а как сделать чтобы кнопочка «close» была над фотографией в углу, а не под ней?