2008-05-31

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

Раньше все картинки для блога я загружал в 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 и копируем строки в секцию <head>:
<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 код:
<a href='http://lh4.ggpht.com/Dr.AKULAvich/RbkTEG2SVnI/AAAAAAAAAEU/JwXtbYG3fBs/DSCN0503.JPG?imgmax=800' rel="lytebox" title="Логойск"><img src='http://lh4.ggpht.com/Dr.AKULAvich/RbkTEG2SVnI/AAAAAAAAAEU/JwXtbYG3fBs/DSCN0503.JPG?imgmax=320' border='0'></a>

Результат:


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

UPD: Перестал использовать, т.к. "голая" картинка быстрее грузится. В некоторых случаях это критично.

3 комментария:

  1. Анонимный31.05.2008, 13:58

    Гм, круто! Может, и мне на блоггер пересесть? Хотя эта система комментариев меня просто убивает...

    ОтветитьУдалить
  2. drakulavich31.05.2008, 18:06

    А на wordpress.com нельзя редактировать код шаблона?
    По поводу комментариев, реализация по умолчанию не фонтан, согласен. Но при желании можно прикрутить движок комментариев как на Хабре.

    ОтветитьУдалить
  3. Анонимный03.07.2008, 17:55

    Лучше бы ты анимацию оставил, имхо дело не в браузере, а в железе.

    ОтветитьУдалить