Даркбокс

Читайте про более новую версию скрипта в записи «Возвращение Даркбокса»

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

И вроде решений для этого написано уйма — бери, да используй. Но вот беда — все они сделаны по принципу «plug-n-play», мол подключай и не парься. В итоге эти решения снабжены всевозможными фичами, которые позволяют открывать окошки с любым содержимым, передвигаться по галерее при помощи клавиатурных сокращений и многое-многое другое. Классно, ведь! Нет? Ну, не совсем — в итоге код такого плагина распухает от всех этих возможностей, которыми никто не будет пользоваться, и непонятных HTML-шаблонов, содержащих сомнительный код — и тут же стили к нему. А вот это уже не слишком классно…

Если страдать синдромом аккуратизма определённой тяжести, то подход а всё равно это JS, какая нафиг разница становится совсем неприемлем. А переписывание чужих решений практически равноценно написанию собственного — чем, собственно, я и занялся при подготовке новой версии этого сайта.

Начиналось всё с простых, но очень правильных принципов:

• Данные, т.е. картинка, — в HTML
• Оформление — в CSS
• Динамика — в JS, с полной обратной совместимостью

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

Даркбокс — пример работы, весь код в одном файле.

Принципы работы

Очень полезно начинать описание задачи не с фраз вроде «а там такая штука крутится полупрозрачная, а потом пфф! и блёстки…». Поэтому я начал с простого: у меня есть просто ссылка на просто картинку, и только если у пользователя включён JS, ссылка не срабатывает, а открывается то самое полупрозрачное с блёстками.

Контейнер для открытия картинки представляет собой блок вырванный из потока и спозиционированный при помощи position:fixed. Внутри него расположено само полупрозрачное затемнение и блок загрузчика с крутящимся псевдо-датчиком загрузки. Все эти объекты создаются динамически и складываются в нужном порядке:

<div class="popup-frame">
    <div class="popup-shadow"></div>
    <div class="popup-loader"></div>
</div>

Это дело красиво появляется и дальше в загрузчик вкладываются пока невидимые картинка и кнопка закрытия. Атрибут src берётся из href ссылки, alt из её title:

<img src="…" alt="…"/>
<span title="Закрыть"></span>

Сразу после загрузки нашей картинки, загрузчику выдаётся класс popup-loaded, который отключает датчик загрузки. Дальше он плавно меняет свои размеры, смещение, прозрачность и, наконец, ещё раз сменив класс на popup-canvas, показывает нам картинку. А на тень, кнопку и Esc вешается обработчик закрытия всей этой красоты.

Таким образом, всё оформление, что не участвует в анимации, применяется при помощи CSS-классов, а не присутствует в JS явно, как очень любят делать все плагинописатели.

Неизбежное исключение

Да, чуть было не забыл про IE. Данному скрипту удалось угодить всем его актуальным версиям, начиная с 5.5 и заканчивая 8.0. Проблемы с position:fixed для IE6 и младше решаются при помощи expression:

* HTML BODY {
    background:url(about:blank) fixed;
    }
* HTML .popup-frame {
    position:absolute;
    top:expression(0+(
        (e=document.documentElement.scrollTop)
        ?e:document.body.scrollTop)+'px');
    }

Правило background:url(about:blank) fixed задаёт пустое фиксированное изображение для того, чтобы позиционирование блока в IE6 работало плавно, без рывков. Прозрачность для всех версий IE решается при помощи filter:alpha(opacity=N), а использование PNG-24 картинки для кнопки, столь же традиционно лечится для IE6 с помощью AlphaImageLoader.

В целом, написание скрипта прошло гладко, как по учебнику, за исключением выходки браузера Opera. Ему, видите ли, не получить размеры динамически созданной и уже загруженной картинки, пока она не будет вставлена в документ. Даже IE5 ничего подобного не вытворял, в прочем, мне не жалко.

Итак, перед вами не претендующее на красоту и универсальность, однако, простое и эффективное решение для открытия картинок в стиле вебдваноль. Если кому-то пригодится — буду только рад.

19 декабря 2008: благодаря внимательности читателей, поправлены некоторые ошибки в IE6, в частности — методика борьбы с дрожащим фоном и expression теперь универсальны и работают как в Standard Mode, так и в Quirks Mode.

html { background: #fff url(about:blank) fixed; }

url(about:blank)

url(a)