Три дня назад, 23 июня, Фотораме исполнился год. По этому случаю я круто обновил и Фотораму, и её сайт.

Некоторые новые важные штуки версии 3.0 ниже.

Упрощённое добавление ХТМЛ
Больше не нужно писать хитрые скрипты, чтобы запихнуть в фотораму ХТМЛ, просто пишите:

<div class="fotorama" data-width="500" data-height="333">
  <div>1</div> <div>2</div> <div>3</div>
</div>

Можно использовать любые теги, не только дивы.

У Фоторамы нет никаких дефолтных стилей для ХТМЛ, задавайте любые классы и пишите ЦСС самостоятельно. Если фрагмент текста нужен над фоткой, укажите путь к ней через спецатрибуты:

<div class="fotorama" data-width="500" data-height="333">
  <div data-img="1.jpg">1</div>
  <div data-img="2.jpg">2</div>
  <div data-img="3.jpg">3</div>
</div>

Фотку можно поставить и внутрь дива, тогда она не будет обрабатываться фоторамой. Для превьюшек предусмотрен атрибут data-thumb, для штатных подписей — data-caption.

Как легко я сверстал бы галерею на главной Гетвеара, если у меня тогда была Фоторама!

Умное слайд-шоу
Раньше просто отрабатывал таймаут и фотка перелистывалась. Тупо было, если в заданный интервал фотка не успевала загрузиться и один прелоадер сменялся другим. Теперь фоторама ждёт загрузки фотографии, показывает сколько нужно, мотает дальше. Ещё умеет останавливать проигрывание после первого касания пользователя, эту фичу можно отключить через stopAutoplayOnAction:false.

Умная инициализация
Фоторама научилась инициализироваться в скрытых через display:none блоках. Многие хотели поставить фотораму в скрытом блоке, который открывался бы по ссылке. Или несколько фоторам перещёлкивать табами. Сделать это было сложно, так как фоторама ломалась — при инициализации ей нужно определять размеры фоток, а сделать это в скрытом блоке невозможно. Теперь фоторама ждёт того момента, когда окажется видимой и быстренько инициализируется. Если скрыть её на полпути, она тоже это поймёт и приостановит работу. Круть! Такое вообще никакая галерея не умеет.

Минимальные и максимальные размеры
Параметры minWidth, maxWidth, minHeight, maxHeight можно использовать вместе с процентным заданием ширины.

Отключение ЦСС-анимаций
Опция cssTransitions:false переводит фотораму в режим совместимости. Бывает, на сложных страницах, дополнительные анимации и трансформации ломают вёрстку или конфликтуют с другими анимациями. В таком случае можно пожертвовать аппаратным ускорением в Вебките ради общей железобетонности конструкции.

Фейд
Раньше никто не догадывался, что фейд включается через touchStyle:false; теперь всё очевидно — transition:’fade’ (’slide’ по умолчанию). Крутость фоторамного фейда, а точнее наплыва, я уже показывал.

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

Прелоадер
Убил ГИФ. Он был чувствителен к фону и из-за этого у меня даже была опция preloader:’white’ для светлого фона — явный левак. Я нарисовал свою фононезависимую 12-кадровую крутилку в спрайте, которую анимирую скриптом:

Ещё
Опции: thumbsCentered, hideNavIfFullscreen, cropToFitIfFullscreen, fitToWindowHeightOffset. Новые колбеки: onFullscreenOpen, onFullscreenClose, onTransitionStop.

Исправлены баги под Андроидом.

Разобрался со странностями поведения Фоторамы на страницах, где кроме Джейквери был ещё и Мутулз.

Слегка поправлена физика. Тонна улучшений под капотом.

Идите на сайт, берите Фотораму, изучайте примеры кода, читайте новую лицензию, наконец:

http://fotoramajs.com/

Красоту на сайте помогли навести Максим Ткачук и Денис Талала. Максим Ильяхов сделал тексты ещё более мощными и понятными. Кучу готовых рецептов использования Фоторамы заверстал Артём Сапегин. А Коля Митин помог с ПХП и я прикрутил проверку домена на наличие лицензии (если вашего сайта с фоторамой там нет, напишите письмо, пожалуйста). Спасибо вам, друзья!