В свежей версии Фоторамы я добавил новый способ её инициализации. Теперь в большинстве случаев можно обходится без вот такого инлайн-джаваскрипта:

$(function(){
  $('.fotorama').fotorama();
});

Просто добавляете класс fotorama и блок автоматически превращается в Фотораму:

<div class="fotorama">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
</div>

Раньше такой способ тоже существовал, но я о нём не рассказывал, потому что ничего нельзя было настроить — инициировалась дефолтная Фоторама. Теперь опции можно указывать с помощью атрибутов data-*:

<div
     class="fotorama"
     data-backgroundColor="#797775"
     data-thumbsPreview="false"
     data-margin="0"
     data-resize="true"
>
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
</div>

А раньше было только так:

<div class="fotorama">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
</div>
<script>
$(function(){
  $('.fotorama').fotorama({
    backgroundColor: '#797775',
    thumbsPreview: false,
    margin: 0,
    resize: true
  });
});
</script>

Так можно указать все опции, кроме data, html и onShowImg. Прежний способ инициализации и настройки работает без изменений.

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

Я несколько раз перепроверил код, кроссфейды работали чётко и, по идее, должны были давать неизменяющуюся насыщенность цвета в одинаковых фрагментах двух картинок, или 20% + 80% не равно 100%?


Как выясняется на практике, не равно. Артём Горбунов посоветовал так кросфейдить картинки, чтобы сумма их прозрачностей всегда была больше 100%, сказав, что это изобрёл Илья Бирман. Я попробовал удлинить вдвое время исчезновения одной из картинок и это дало хороший результат.


Потом ещё и ещё увеличивал разницу между скоростями фейдина и фейдаута, пока не дошёл до идеальной формулы кросфейда:


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

http://artpolikarpov.ru/html/fade/

Добавлено утром: В комментариях справедливо замочили меня за неправильную работу примеров. Теперь, благодаря замечанию Игоря Барабашина, ЦСС исправлен и всё должно работать, как надо.

А ещё Александр Карпинский написал крутой комментарий:

С одной стороны, мне хочется поворчать, что здравый смысл изобрел Илья Бирман. Это не так, здравый смысл всегда говорил — два непрозрачных объекта один позади другого будут вцелом непрозрачными. Чтобы сделать перетекание, нужно стобы прозрачность менялась у ближнего, а дальний так и оставался непрозрачным.

С другой стороны, хочется поворчать по поводу фразы «или 20% + 80% не равно 100%?». Ну правда, откуда этот плюс? На самом деле там, если 0,8 — непрозрачность ближнего, то общая непрозрачность = 0,8 + 0,2 * (1 — 0,8) = 0, 84.

Ну и еще оговорка: Если картинки сами будут полупрозрачными, то их интенсивность при таком способе будет больше чем нужно.

В прошлый раз я анонсировал здесь Фотораму версии 1.0. С тех пор минуло 2 месяца — исправлены старые баги, напрограммированы новые :-)

Фоторама окончательно повзрослела, и в связи с этим я написал большую статью о ней на Хабре (кстати, это мой дебют там):

http://habrahabr.ru/blogs/webdev/133741/

Кое-что из нового:

• АПИ для управления галереей через собственные функции,
• резиновый ресайз,
• вертикальная ориентация,
• произвольный ХТМЛ над фотками.

Свежие файлы, документация и примеры на сайте Фоторамы.

Я тут ещё немного подтюнил Эгею, чтобы блог был в одной шкуре с остальным сайтом. Вёрстка теперь одноколоночная, сайдбар переехал в хедер и спрятался за «дыдыдышки» — теги, избранное, обсуждаемое. Слайдер важности тегов есть на каждой странице.

Во время тестирования новых поповеров обнаружилось, что флеш перекрывает их:


Этой фиче уже 100500+ лет, и все знают, как от неё избавиться — нужно добавить ролику атрибут wmode со значением opaque. Чтобы не править коды видео в написанных и будущих заметках руками, я написал нехитрый скриптик, который всё делает автоматом:

http://dl.dropbox.com/u/29499284/wmode-opaque.js

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

Кстати, теперь решилась проблема не только с моими поповерами, но и с формой логина в блог. Эвона как было:

Обновил Фотораму.

С управлением жестами и анимацией ещё можно поспорить: например бюрошному Тигру нужен именно фейд, а у Антона Шеина запястье отваливалось, пока он тестировал новое перелистывание галереи.

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

В следующей, 0.5-й версии, ожидается возвращение фейда и перемотки по клику (будет доступно как опция). Берите и пользуйтесь на здоровье.

Чуть не забыл! Фоторама научилась быть диворамой, можно (на свой страх и риск!) положить в неё любые дивы вместо картинок. Буду благодарен, если вы поделитесь идеями о развитии плагина, пришлёте багрепорт, поможете справится, с чем у меня не получается.

Первая версия слогана для Мотора была такой:


Верстать слоган нужно было текстом, но чтобы он точно умещался между крайними штрихами „m“ и „r“. Подбор межбуквенного растояния (letter-spacing) не дал никакого результата — в разных браузерах всё выглядело по разному, при масштабировании шрифтов дико разъезжалось, а убери пару букв — значение нужно опять подбирать экспериментально.

Спасение, как это часто бывает, нашлось в таблице. Код получился страшный, но работающий:

<table><tr><td>И</td><td class="r">&nbsp;</td><td>с</td><td class="r">&nbsp;</td><td>т</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>р</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>о</td><td class="r">&nbsp;</td><td>б</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>а</td><td class="r">&nbsp;</td><td>в</td><td class="r">&nbsp;</td><td>т</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>м</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>б</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td>л</td><td class="r">&nbsp;</td><td>я</td><td class="r">&nbsp;</td><td>х</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>и</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>л</td><td class="r">&nbsp;</td><td>ю</td><td class="r">&nbsp;</td><td>д</td><td class="r">&nbsp;</td><td>я</td><td class="r">&nbsp;</td><td>х</td></tr></table>

У ячейки с буквой ширина 1px, с пробелом — auto. Магия в том, что ячейка таблицы не умеет быть меньше своего содержимого, и в данном случае принимает ширину своей буквы, а пустые ячейки автоматически и равномерно заполняют оставшееся от букв место.

Потом слоган поменяли на короткий «всё что движется». Таблица уже была не нужна, зачем тянуть 3 буквы на 300 пикселей. Но убивать своё изобретение мне не хотелось, и чтобы оправдать его жизнь я придумал прикольную анимацию слогана. Правда на боевой сервер она не попала (главный редактор не поверил арт-директору, что она — годная), и сейчас там моя табличка просто для того, чтобы вводить в ступор любопытствующих технологов.

Наслушавшись комментариев и критики выкатываю 0,2-ю версию Фоторамы. Она:

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

Качайте и пользуйтесь, пожалуйста :-) Буду рад также, если кто-то захочет поучаствовать в этом нехитром проектике и научит меня пользоваться Гитхабом.

Написал джикверный плагин галереи, работающей почти так же, как фотки у Тёмы Лебедева в путешествиях: http://tema.ru/travel/taimyretnoexp-2/ (долистайте до второй). Мне нравится такой формат, когда галерея не выглядит чужеродным «флешем» на странице, нет замороченного управления и фотки могут быть любой высоты и ширины.

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

Отличия такие:

• очень легко подключить — перечисляете картинки, как обычно и добавляете одну строку кода;
• пимпочки расположены слева вверху, если у картинки изменится размер они никуда не уедут, плюс они скрываются и не мешают смотреть картинку, когда курсор где-то в другом месте;
• проверяется загруженность картинки;
• есть лёгкие кросс-фейды и анимация при переходах;
• не используется никакая графика;
• внешний вид пимпочек и их поведение можно настроить через ЦСС;
• есть дополнительные опции — слайд-шоу, продолжительность кросс-фейда и подписи к картинкам (назначаются через alt).

Качайте и пользуйтесь, пожалуйста. Буду рад также, если кто-то захочет поучаствовать в этом нехитром проектике.