Даркбокс 2

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

Жизнь выдвигает новые требования, поэтому некоторые решения получают продолжение. Итак, перед вами продолжение экспериментов над одним простым, но очень полезным способом красиво открывать одиночные картинки. Более подробно об изначальной проблеме и первом варианте решения читайте в заметке «Даркбокс», а сейчас поговорим о даркбоксе номер два.

Для начала пример — Даркбокс 2, всё в одном файле.

Что нового, с виду

Что нового, технически

Ну а чисто технически изменений не слишком много. В целом, код подрос примерно на сорок строк, большую часть из которых занимает мудрёное вписывание картинки в размеры окна. Помимо этого, сделана попытка сохранять создаваемый для дарбокса объект, чтобы клонировать и использовать его повторно для всех картинок. Не уверен, что это сильно повысило производительность, но попытка сделана:

if(!$('div.darkbox-frame').length) {
    darkbox = $('<div class="darkbox-frame">…').appendTo('body');
}
var frame = darkbox.clone().appendTo('body');

Совместимость у скрипта прежняя, разве что тестирование в IE5 привело к JS-ошибке, но дело, скорее всего, в текущей версии jQuery. Думаю, что отряд не заметит потери бойца. Ну а Opera традиционно заставила прямо-таки создать картинку, а не просто приделать атрибут src к уже имеющемуся коду.

Другая проблема в IE, что тянется ещё с прошлой версии, случается во время анимации прозрачности блока с чёрным фоном от 0 до 50%. Суть её такова, что если описывать прозрачность в CSS при помощи filter:alpha(opacity=N), то блок при появлении становится чёрным, потом абсолютно прозрачным и только потом начинается анимация. Видно это всего долю секунды, но осадочек остаётся. Трюк в стиле добавим немного абсурда, когда прозрачность добавляется к блоку при помощи JS, сработал, но снизил производительность всего решения. Поэтому вопрос открыт.

С интересом жду ваших мнений, замечаний и предложений. Разработка даркбокса продолжается…

Комментарии

42

Долго. Незачёт. Особенно торможение раздражает после того, как картинка загрузилась и начинается переход от тёмного к светлому. В FF он особенно дёрганый, в Opera чуть поглаже.

Ну мне и обычный lightbox не нравится :-) Сам юзаю Сашин скрипт (http://beholder-eye.info/2006/03/13/litebox)

Да, стрелки напрашиваются. Но я так понимаю, это выходит за рамки того минимума, который предполагалось реализовать.

с VML попробовать можно, но:
1) vml:image в IE5-6 плохо кеширует — будет лишний раз спрашивать сервер на предмет "If-modified-since". И это не лечится, вылечили только в семерке.
2) vml:image к прямому применению не пригоден — будет отображать "красный крест" незагруженного изображения пока не загрузит.
Так что попробовать можно, но будет ли результат качественнее, вот в чем вопрос.

Вадим, очень здорово!

Скажите, пожалуйста, можно ли использовать код с своих проектах?

Вы сказали, что "любой этап жизни даркбокса можно прервать при помощи клавиши Esc", но это не совсем так: Esc не прерывает fade in картинки.

Долго. Незачёт. Сам юзаю Сашин скрипт

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

А вот бы сделать и стрелки для листинга

Я сейчас думаю, как реализовать ну самые-самые примитивные стрелки.

Можно ли использовать код с своих проектах?

Конечно, я буду только рад. Это не самостоятельный продукт, а просто эксперименты в этом направлении.

Esc не прерывает fade in картинки.

Фактически, сразу после клика по ссылке, на Esc вешается обработчик, который анимирует тень до полной прозрачности и удаляет экземпляр даркбокса. Так что даже во время fade-in картинки Esc должен срабатывать точно так же.

случается во время анимация

анимации?

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

Пока крутился-вертелся с багом div.darkbox-shadow в IE обнаружил еще один глюк: если на странице много контента и есть скролбар, то при повторном открытии картинки при скроле вниз div.darkbox-shadow съезжает. На твоем примере этого не добиться из-за малого содержания страницы. А здесь это легко увидеть если закрывать картинки не крестиком, а кликом по затемненному полю.

Я бы не стал ничего клонировать. Это устранит непонятки в случае, который я описал.
И потом я не понял: почему бы не добить IE вот такой строкой перед появлением дива darkbox-shadow:

if($.browser.msie) $('div.darkbox-shadow').css('opacity',0);

...трюк, когда прозрачность добавляется к блоку при помощи JS, сработал, но снизил производительность всего решения.

Вадим, ты проводил какие-то измерения? О каком снижении производительности идет речь?
Вообщем, я предлагаю оставить без клонирования и с заплаткой для IE.
P.S. еще в IE 6 под большой картинкой черная полосочка... Но это уже мелочь... :)

О каком снижении производительности идет речь?

Я замерял загрузку процессора и визуальную скорость отрисовки анимации.

С IE я ещё потанцую, а чем ты аргументируешь отказ от клонирования? Разве это формально не должно ускорять инициализацию нового даркбокса?

Формально должно. Но то, что картинки открываются по одной и человеком, а не перебираются молниеносным скриптом, заставляет меня думать, что это ни к чему...
А тем более будет лишним, когда будет листалка картинок.
Но я не утверждаю, потому что ничего не измерял...

Субьективно ощущение от интерфейса в Webkit - как от плавания в казеиновом клее. Серьезно, надо быть проще. Может быть это связано с движком анимации jquery, может быть с чем то еще - но раздражает сильно. Анимация должна быть короче вдвое-втрое, плюс "зум-эффект" на мой взгляд излишний (к примеру - он исходит из центра окна а не из блока который вызывает попап, то есть является просто декором). Просчет transparency в браузерах на все окно идет медленно.

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

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

За кнопки с разных сторон - зачет, следующий этап - сделать чтобы
Прости, не удержался.

следующий этап - сделать чтобы

Чтобы что? )
А так — спасибо за мнение, наверное и правда не удержался, чтобы сделать красиво. Делать такое и комбинировать эффекты довольно интересно. Будем проще в следующей версии, хотя бы для того, чтобы это дело не тормозило в IE.

Спешил, пропустил строку. Чтобы крест появлялся в самом затемнителе и намекал пользователю что весь затемнитель работает как деактиватор (мышка после клика НЕ там где close box). В следующий раз буду аккуратнее.

Комбинировать то здорово, но кьюить (выставлять их в очередь) опасно. От результата возникает впечатление "щас мы вам покажем разворачивающийся боксик. Так-с, минутку. А сейчас фейд! А сейчас шейк! вы еще с нами?.."

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

Владимир, получается, что до загрузки картинки я совсем не знаю её размеров, только пропорции. Поэтому, если превьюшка 40х30 пикселов и я растяну её на предполагаемые 800х600… то потом, когда загрузится картинка 400х300, мне придётся уменьшать растянутое превью, что будет выглядеть крайне нелепо.

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

Всегда интересовал вопрос, как обстоят дела с тенденцией поддержки браузеров в разработке здесь и сейчас? Впринципе про ИЕ5 можно забыть, но вот стоит ли тестировать в Opera 9.25... к чему это я, в ней картинки не подгружаются и нет полупрозрачной заливки ;) такой вот багрепорт.

Спасибо за багрепорт, думаю, что поддержку стоит обеспечить на уровне всей 9-й версии Opera.

Немного оффтоп, про кнопку close. Был ли опыт определения локации этой кнопки на линуксах, учитывая, что там ее можно поставить хоть вправо, хоть влево?

Линукс в данном случае трактуется как «не-мак», поэтому кнопка справа. Особых вариантов не вижу )

Конечно, конечно — feel free. В любых количествах и без упоминания.
Разве что не присваивать авторство ;)

С кнопкой для Мака - это конечно круто придумано.

На текущий момент мне, пожалуй, больше всего нравится FancyZoom. И быстрый достаточно и красивый. С удивлением обнаружил его на oper.ru, например. Единственно, что в IE6 подтормаживает на мой взгляд.

Я сделал свой собственный вариант лайтбокса под него, всё-таки ты прав Вадим, без анимации совсем жизнь скучна :-). Вот вспомнил про клавишу Esc - сейчас доделаю.

А насчёт листалки - мне кажется, может и не стоит её делать? Мне не нравится, когда lightbox например на главной странице перебирает картинки из абсолютно разных постов. Или делать контейнеры какие, чтобы он только внутри них работал.

в своё время делал объединение фоток в галереи через использование параметра rel у ссылки и листал в этих рамках. удобство в том, что фотографии одного сета могут быть разбросаны по всей странице.

IE8 - работает
FF3.5.5 - без проблем
Crome 3.0.195 - тоже вопросов нет, а вот
Opera 10.10 - как описано выше (повторно картинка не грузится).

Оч ждем соответствующей правки.

А вот меня беспокоит вопрос относительно того как много времени мы ожидаем в процессе пустого (тупого) лицезрения крутилки, то есть мы кликаем на одну картинку - ждем, ждем, ждем - показалась, посмотрели

кликнули на другую - снова ждем ждем, смотрим на эту крутилку безинформативную совершенно

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

может быть именно поэтому такие сервисы как flickr.com не добавляют себе подобных плагинов. хотя если оглянуться вокруг, то это делают миллионы дизайнеров. эффект красив, да, но разве это удобно?

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

Стив, я абсолютно с вами согласен и эта проблема могла бы быть решена в рамках таких «лайтбоксов», если бы у нас была возможность получать размеры картинки до её полной загрузки. А насчёт сравнения с Flickr'ом — это фотохостинг, там люди занимаются исключительно тем, что смотрят картинки. На этом сайте основа — текст, а картинки только иллюстрируют, но никак не являются основой. В любом случае, все ссылки живые и вы можете накликать их в отдельных вкладках, если ваше соединение не позволяет удобно пользоваться даркбоксом.

у меня почему-то в хроме и опере второй раз увеличенная картинка не подгружается, все останавливается на отображении индикатора

Открыл одну картинку
Нажал ESC после загрузки - закрылась
Открываю другую - анимация, показывающая загрузку картинки, не крутится