Тёплый край

Я несколько лет выпиливал лобзиком, мучился, и хоть бы одна собака сказала мне про величественность jQuery! Ну то есть я, конечно, слышал это название, но насколько кардинально jQuery меняет клиентский скриптинг — честно говоря, не представлял.

Всё дело, собственно, в том, что меня заело сделать нормальную галерею для фоточек вместо той галереи в стиле конца девяностых, что у меня была. Как оказалось, ничего сложного нет.

Сам скрипт можно посмотреть здесь: gallery.js. Он очень простой и наверняка в некоторых местах неоптимальный, но меня на первый раз устраивает.

Первый кусок добавляет в DOM-дерево элементы для оверлея и всплывающего окна с картинкой. Функция set_position позиционирует и показывает окно с картинкой, а заодно и окно с текстом «Loading». Следующие три функции срабатывают при завершении загрузки картинки, щелчку по миниатюре и щелчку по кнопке закрыть или большой картинке, соответственно.

Кроме написаная самого скрипта, потребовалось чуть-чуть изменить скрипт генерации галереи. Вот что он выдаёт (курсивом помечены новые фрагменты):

<div style="float: left; margin: 0.5em; 
text-align: center; width: 150px; height: 160px"><a class="gallery"
href="/users/helgi/g/parade/images/dsc_5805.jpg">
<img src="/users/helgi/g/parade/thumbnails/dsc_5805.jpg" 
alt="dsc_5805.jpg" title="Голова первой колонны"></a><br>Голова первой колонны</div> 

И, конечно, пришлось дописать несколько строчек в таблицу стилей:

#gallery_overlay { position: absolute; left: 0; top: 0;
    opacity: 0.8; z-index: 900; background: black; display: none }
#gallery_image, #gallery_loading { position: absolute; display: none;
    z-index: 990; background: white; padding: 10px; 
    border: 1px black solid; width: auto }
#gallery_image a { float: right; padding: 2px 5px;
    cursor: default; border: 1px solid; font-size: larger }

На работающую галерею можно посмотреть, например, здесь.

P.S. Кстати, моё собственное правило о границах применимости клиентских скриптов соблюдено: очевидно, что без джаваскрипта всё будет работать как прежде.

Тэги: indiana, webdev
Комментарии (9)