Новая версия известного 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>
Меня зовут Владимир, я программист-фрилансер, специализирующийся на Web-программировании и програмировании под Linux.
По совместительству занимаюсь администрированием LAMP/LNMP-серверов и техническим переводом.
Владимир, прошу помощи.
Использую у себя в блоге на wordpress плагин lightbox 2. Перерыл весь интернет, но не могу найти решения для моей проблемы.
Мне очень нужна возможность скачивания картинки. Когда открывается картинка, хотелось бы иметь кнопочку “скачать” по аналогу “закрыть”. Это возможно?
Заранее благодарю
Только JavaScript’ом — вряд ли. Для скачивания необходимо, чтобы сервер прислал заголовок Content-Disposition, что сервер по умолчанию делать не будет.
Вопрос по поводу плагина - не работает на некоторых шаблонах WP… От чего это может происходить? Можете подсказать?
Дайте, пожалуйста, ссылку на страницу, где плагин не работает.
Здравствуйте Владимир я типа начинающий lol вообщем
вот не давно столкнулся с мыслью что надо бы делать портфолио себе, не много изучил Dreamweaver, все вроде хорошо но тут столкнулся с проблемой, - поскольку я занимаюсь графическим дизайном, мне нужно куда то помещать изображения, - я решил помещать их в swf но оказалась проблема, я не знаю языка, который не обходим (так мне в блоке на сайте одном сказали я вообще ни какого языка не знаю:)по мне это хорошо в дреаме вроде не плохо ориентируюсь - но пару раз слышал что программы вот эти вот которые сами все делают -туфта 
. Во общем копался, копался и случайно столкнулся с Lightbox меня привлекло, изображения в хорошем качестве открываются прямо нажав на них да так эффектно есть правда один не достаток *и можно скопировать * хотя я подозреваю что наверни ка есть защита:)
У меня вопрос как или что нужно сделать чтобы был готовый LightBox типа просто вставь коринку:) через что можно сделать LightBox? и как его вставлять в дреам?.
Заранее благодарю.
Абсолютно ничего не понял.
Доброго времени суток!
Владимир подскажите пожалуйста как сделать фотогаллерею,
фотографии которой будут увеличиваться при наведении на них курсора.
как сделать чтоб фотографии увеличивались плавно или с каким-то красивым эффектом ??
Например,
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));
}
}
Копипаста с browsershots.org.
Спасибо!! помогло !!
Владимир, день добрый!
Прикрутил к сайту protobox, при просмотре в IE версий 6-8 (другие не проверял) в окне protobox снизу рамка с надписью close и крестиком срезана с боков пикселей на 10-20. Вторая проблема это то, что если просматривать фотографии не прокручивая страницу вниз, то черное поле за protobox’ом закрывает полностью экран, а если пролистать страницу вниз и вызвать protobox с нижних фотографий - черное поле срезается и закрывает только часть экрана сверху.
Что посоветуете? Заранее спасибо!
Максим, где смотреть?
ммм, сорри, я думал из инфы комментария понятно будет. Извиняюсь.
http://www.sunnypanthers.com
Владимир, не дождался вашего совета, прикрутил к сайту стандартный лайтбокс, он медленнее, неудобнее, единственное что работает во всех браузерах правильно.
Меня в стране не было — приходилось уезжать из-за дурацкого 90-дневного срока, а потом возвращаться
Если вкратце: проблемы у Вас остались. В IE6 PrettyPhoto отображается крайне хреново (и кнопки не те). Проблема с оверлеем была в CSS. По поводу надписи Close — эта проблема давно исправлена, я просто не помню, что именно я исправлял (так как у Вас каким-то чудом оказалась старая версия кода, в которой еще есть функция
getPageSize()). Если интересно, скачайте рабочий архив. У меня он работает во всех браузерах (при условии, что CSS сайта не конфликтует с CSS ProtoBox).Обновил ProtoBox, новая версия здесь (или по ссылке в статье).
Спасибо, Владимир! Буду пробовать обновленный вариант
Здравствуйте, пробовал добавить плагин protobox (скопировал в папку плагины в вордпрес) однако вордпрес (2.8.3) его не видит, вордпрес
всё ок, это руки
А это не плагин
Это просто JavaScript.