LyteBox — демонстрация изображений в оригинальном размере

Dr.AKULAvich

2008-07-02

Раньше все картинки для блога я загружал в Google Pages, потому что пользуюсь не web-интерфейсом, а Petrus Blogger. С недавнего времени в PB появилась возможность загружать снимки в альбомы Picasa. Это уже интереснее. Ведь Picasa Web Albums, как оказалось, способен генерировать копию снимка меньшего разрешения (спасибо akira за своевременную подсказку). Таким образом, удобство постинга скринов возросло. Чтобы привнести некую эстетическую завершенность к отображению оригиналов, решил опробовать несколько модальных окон на javascript, которые, собственно, для этого и предназначены. Самое популярное решение под названием LightBox 2 не захотело сотрудничать. Покрутив еще несколько вариантов, остановился на LyteBox.

Установка

1. Для начала неплохо заполучить архив
2. После распаковки я отредактировал lytebox.css, удалив конструкции "images/". Далее установил значение this.doAnimations=false в самом скрипте. Анимацией пришлось пожертвовать в угоду скорости. Везде, кроме Opera 9.5 ,разворачивание окна безбожно тормозило.
3. Загружаем в Google pages файлы lytebox.css и lytebox.js, а также графику из каталога images (необязательно все выгружать, мне хватило темы оформления grey);
4. Отправляемся на blogger.com и копируем строки в секцию :

   <script type="text/javascript" language="javascript" src="lytebox.js"></script>
   <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
   

5. Теперь все готово и можно размещать агитплакаты примерно в таком виде:

   <a href="images/image-1.jpg" rel="lytebox" title="Название на усмотрение">Смотреть!</a>
   

Ознакомится с подобными скриптами поможет эта сводная таблица.

Пример. HTML код:

rel="lytebox" title="Логойск"><img src='http://lh4.ggpht.com/Dr.AKULAvich/RbkTEG2SVnI/AAAAAAAAAEU/JwXtbYG3fBs/DSCN0503.JPG?imgmax=320' border='0'></a>

Результат:

?imgmax=800 указывает сервису ширину генерируемой картинки.