Возвращение Даркбокса

Самые давние читатели этого блога должны помнить серию заметок, посвящённых скрипту для красивого открытия картинок, написанному в подражание множественным «лайтбоксам»: Даркбокс и Даркбокс 2. С появления этой идеи минуло уже больше двух лет и, вроде бы, уже должны были появиться внятные решения, которые соответствуют всем заявленным в первой заметке условиям. Только вот до сих пор не видно на горизонте ничего приличного. Поэтому Даркбокс возвращается — отбросив версию и все приличия — прямиком на новомодный Github. Столь же красивый и простой — встречайте!

Технологические изменения

Прежде всего, код был полностью переписан в полном соответствии с традициями последнего времени — то есть не мной. Игры в эффективное программирование я, к счастью, бросил. Автором нового кода является Олег Рощупкин, нескучный программист и коллега по песочнице ещё с вебмасконовских времён. Новая версия скрипта некоторое время проходила испытания как на этом сайте, так и на проекте «Веб-стандарты», пока в один чудесный день не появилась на GitHub. Но что-то мешало мне расслабиться и публично заявить о новинке. Всё-таки HTML- и CSS-коду исполнилось почти два года, за которые я успел научиться чему-то новому. Поэтому вся структура и стили были радостно переписаны с нуля.

В основу новой HTML-стуктуры был положен принцип состояний, который был успешно опробован для проекта Open Player, который всё ещё ждёт своего часа и гениального JavaScript-программиста, но об этом в другой раз. Суть принципа сводится к тому, что каждый модификатор, изменяющий состояние всей структуры, применяется к корневому элементу и видоизменяет все нужные элементы через каскад. Это позволяет окончательно очистить JavaScript от оформительских штучек и минимизировать количество операций с атрибутами class. Вот так выглядит код открытой картинки:

	<div class="darkbox darkbox-on darkbox-loaded darkbox-done">
	    <div class="darkbox-shadow"></div>
	    <div class="darkbox-canvas">
	        <img src="picture.jpg" alt="">
	        <div class="darkbox-button darkbox-button-left" title="Close"></div>
	    </div>
	</div>

Как вы можете видеть, вся история открытия картинки записана в атрибуте class корневого элемента. Пройдёмся по ней с самого начала:

1. По клику пишем на страницу базовый класс darkbox;
2. Инициализируем его и готовим к загрузке при помощи darkbox-on;
3. Готовимся к тому, чтобы красиво показать загруженную картинку: darkbox-loaded;
4. Завершаем все действия, вешаем обработчики закрытия и показываем крестик: darkbox-done.

Как только картинку закрыли, все упомянутые классы успешно очищаются и корневой darkbox, притаившись как тот партизан, продолжает ждать новых вызовов, чтобы повторить описанное упражнение. Исключение из упомянутого принципа состояний только одно — расположение кнопки закрытия окна слева или справа, в зависимости от платформы. Это класс оказался настолько специфическим, что крайне неуместно смотрелся на корневом элементе.

Упомянутые состояния также позволили более наглядно записать CSS-код: теперь он структурирован по принципу базовый класс → модификаторы. Более того, из-за этих чисто архитектурных решений значительно упростился файл хаков для IE, теперь он содержит всего одно правило для IE7, позволяющее окончательно сбросить полупрозрачность, которая задаётся в JavaScript при помощи фильтров:

	* + HTML .darkbox-done .darkbox-canvas {
	    filter:none !important;
	    }

Поддержка IE6 осознанно не предусмотрена, однако магическая сила open source позволит вам не только дописать нужный уровень поддержки, но ещё и предложить её в виде патча к существующему проекту прямо на GitHub. Дерзайте.

Функциональные изменения

Благодаря серьёзному подходу Олега, скрипт теперь умеет обрабатывать битые картинки, для которых не случилось заветного события load. Оформляется это соответствующим запретительным значком. Мои же попытки освежить CSS-код привели к тому, что теперь для анимации загрузочного спиннера используется не анимированный GIF, а восемь последовательно смещающихся состояний спиннера, заключённых в один вертикальный спрайт. Это позволяет получить гораздо более чёткий и аккуратный спиннер, благодаря альфа-прозрачности в PNG-24.

Другой приятной фичей, появившейся в новой версии, является процесс анимации картинки от загрузчика до её полных размеров. Раньше загрузчик пролетал до полного размера картинки и только потом появлялась она сама. Сейчас картинка появляется в рамках загрузчика и увеличивается вместе с ним либо до полных размеров картинки, либо до размеров окна, если вдруг не удалось вписаться. Плавность анимации картинки разнится от браузера к браузеру, но выглядит вполне сносно, делая происходящее в браузере более интуитивно понятным.

Использование скрипта

Для того, чтобы заставить все эти чудеса работать на ваших страницах, нужно сделать несколько простых вещей. И если описывать все шаги его подключения, то становится ясно, что этот скрипт предназначен не для начинающих сайтостроителей, мол, подключил один JavaSript-файл и погнали — от этого я как раз и пытался уйти, задумывая этот скрипт. Напротив, если вы умеете читать код и понимаете что и как нужно подключить, чтобы всё заработало — то вы поймёте всё из предоставленного примера.

Остаётся только добавить список файлов, необходимых для работы скрипта, примерно в таком порядке — от оформления к динамике:

• Стили: jquery.darkbox.css и jquery.darkbox.ie.css;
• Картинки: close.png, error.png и spinner.png из папки i;
• Библиотека jQuery последней версии, можно использовать статику от Яндекса или Google;
• Минифицированный файл скрипта: jquery.darkbox.min.js.

Весь этот суповой набор можно скачать со страницы проекта на GitHub. Там же, в разделе Issues, вы можете оставить свои замечания, сообщения об ошибках и даже пожелания для будущих версий. Однако это никоим образом не лишает вас возможности порезвиться в комментариях к этому посту.