Чтобы несколько раз не вставать, три объявления.

1. К спрайту с флагами добавился SQL-дамп и JSON с кодами и наименованиями стран. Теперь пользоваться спрайтом ещё удобнее. Спасибо Анатолию Бурову!

2. Таня Мисютина приглашает на курс про айфоновские интерфейсы. Осталось 9 мест из 16. Идите, если не хотите, чтобы вашу идею приложения реализовал кто-то другой :-)

3. На сайте Фоторамы каждую неделю новый спонсор фотографий, сейчас вот смотрим карточки Азата Ахъярова.

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

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

• http://fotoramajs.com/~oshurkova — Полина Ошуркова,
• http://fotoramajs.com/~okonechnikov — Андрей Оконечников,
• http://fotoramajs.com/~sapegin — Артём Сапегин,
• http://fotoramajs.com/~lebedev — Алексей Лебедев,
• http://fotoramajs.com/~akhyarov — Азат Ахъяров.

Анна Шишлякова написала плагин, превращающий стандартные вордпрес-галереи в фоторамы.

Зип для установки и маленькое кино на сайте Фоторамы:

http://fotoramajs.com/plug-in/

В следующей версии, через пару месяцев: появится форма со всеми настройками для гиков; исправятся все баги, которые вы найдёте; каждую отдельную фотораму можно будет настраивать через тег [gallery], типа так:

[gallery background="#fff" nav="dots"]

На очереди расширение для Эгеи. Оно уже как бы есть, но чтобы его официально опубликовать, нужно подождать выхода из беты нового форматера E2 — Нисдена.

Капитально обновил Фотораму:

• Всё стало быстрее и лучше.
• Появился полноэкранный режим (работающий даже в ИЕ6).
• Управление с клавиатуры в полноэкранном режиме.
• Не фейд, а наплыв (см. заметку).
• Встроенное слайд-шоу (умеет выключаться, если пользователь сам переключил кадр).
• Фоторама теперь может принимать размеры активного изображения при каждом переходе.
• И запоминать конкретную фотографию в адресе страницы.
• Можно задавать ширину в процентах, задавать только одну из сторон, указывать соотношение сторон.
• Новое в АПИ: колбек onClick, методы — play, pause, fullscreenopen, fullscreenclose.
• Новые иконки загрузки и ошибки (см. пост) в чёрном и белом варианте.
• Тысяча улучшений в связях между опциями.
• Некоторые опции переименовал, сохранив совместимость со старыми названиями.
• Исправлены прошлые баги, напрограммированы будущие :-)

На сайте:

• Свежая и полная документация.
• Примеры и трюки, скачать, бесплатно, без СМС.
• Автоопределение языка и мгновенное его переключение без перезагрузки страницы.
• Чудесная 404-я страница с чёрно-белым анимированым логотипом.
• Новые фотки на главной. Эту неделю крутится «Догорама» Артёма Сапегина, дальше будут — Андрей Оконечников, Полина Ошуркова, Азат Ахъяров, Юрий Матте, Алексей Лебедев. Когда авторы закончатся, включу рандом. Кстати, присылайте фотки, кто забыл.

Короче, я старался:

http://fotoramajs.com

Тексты @perepisal Максим Ильяхов.

Не переключайтесь — завтра плагин Фоторамы для Вордпресса.

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

ФОТОГРАФЫ!

Не упустите возможность покрутить свои работы на fotoramajs.com. Напишите письмо, я расскажу про формат.

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

http://fotoramajs.com/~barataliev

За текущие фотки спасибо Артёму Сапегину, Игорю Скаляриеву, Денису Талала, Алексею Лебедеву, Сергею Королю, Сэму Бараталиеву и Даше. Ребята, если хотите на второй круг, тоже пишите.

Спасибо!

Первый набор иконок Фоторамы я выпилил из Даркбокса, вот загрузка:

А вот ошибка:

Для будущей версии Фоторамы я нарисовал свои иконки статуса, вот такие:

Разве не загляденье! Про радиальный градиент напишу отдельно :-)

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

ФОТОГРАФЫ!

Не упустите возможность покрутить свои работы на fotoramajs.com. Напишите письмо, я расскажу про формат.

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

http://fotoramajs.com/~talala

За текущие фотки спасибо Артёму Сапегину, Игорю Скаляриеву, Денису Талала, Алексею Лебедеву, Сергею Королю, Сэму Бараталиеву и Даше. Ребята, если хотите на второй круг, тоже пишите.

Спасибо!

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

$(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/

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

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

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

Сделал сайт за пару вечеров:

Тридиафильма.ру

Предпосылок было столько же.

Первая. Уже которую ночь подряд наш сын засыпает под диафильмы на стене. Бабушкин проектор пылился на шкафу долгое-долгое время, но пару недель назад что-то разладилось с засыпанием и мы с Женей решили попробовать новый сценарий отхода ко сну: умыться, выпить чего-нибудь тёплого, посмотреть диафильм. И это сработало! Короче, я проникся к диафильмам благодарностью за спокойные вечера.

Вторая — хотелось попробовать Фотораму в деле.


Вот собственно и вся история. Дальше по-быстрому придумал, чем мой сайт будет отличаться от других диафильмовых сайтов, прикрутил вертикальный режим и ресайз Фотораме, с помощью Саши Бабаева и Кости Савельева накромсал и оптимизировал полтора гига диафильмов, написал 100 строк ПХП, сверстал и выложил сайт. Ходите на него сегодня, завтра, послезавтра и вообще :-)

Буду благодарен если вы поделитесь ссылкой с друзьями, а отзывами и предложениями со мной.

Первый ответ в рубрике вопросов на сайте Фоторамы:

http://fotoramajs.com/ru/faq/blogengine/