Фоторама 2.0

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

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

На сайте:

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

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

http://fotoramajs.com

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

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

Поделиться
Отправить
22 комментария
Денис Талала

Та забыл сказать про новый фейд. :) Он же уже есть в этой версии?

Артём Поликарпов

Да, он там давно уже.

denisx

до идеала нужен один шаг — при фуллскрине выводить и реагировать на #photoN , чтобы было удобно ссылку давать на страницу

а так +1

Никита

раньше не был на фотораме,
но щас зашел, глянул на логотип — эт супер )
ну и работает шустренько, приятно

hypnocolor

Замечательная новость. Как получу зарплату — сразу сделаю донейт. Такая красота просто обязана быть вознаграждена. Ждём плагин, за него отдельное спасибо :-)

Andrew Gurylyov

Здоровски! Даже не знаю, которое из нововведений больше радует =)
Артём, а как-то можно определять хэш? Чтобы было не #1, #2, #3, а, например, #one, #two, #three или хотя бы #photo1, #photo2, #photo3.
И можно ли, используя на странице два блока фоторамы, как-то использовать два хэша?

Артём Поликарпов

Хеш нормально работает только с одной фоторамой на странице. Его вид не настраивается.

Илья Страйков

Отлично.
Спасибо, Артем

Антон Алейников

Спасибо большое за разработку.
Возможно так и задумано — в 17 Хроме в полноэкранном режиме в момент смены изображения идет как бы мерцание и подтормаживает следующая картинка.

Даниил Пронин

Очень круто! Рад нововведениям. Особенно рад autoplay и примеру «Fotorama + Fancybox».
А ещё есть мысль о встраивании произвольного HTML в Фотораму:
##<div class=«fotorama» data-overlayHTML=«yes»>##

<a href=«1.jpg»></a>##
<div class=«fotoramaCaption»>Первая <span>подпись</span>, например.</div>##
<a href=«2.jpg»></a>##
<div class=«fotoramaCaption»><span>Вторая</span>, например.</div>##
<a href=«3.jpg»></a>##
<div class=«fotoramaCaption»><span>Например</span>, третья.</div>##

##</div>##
Надеюсь, ясно излагаю.

Иван

скачать, бесплатно, без СМС. *

  • 35 долларов

классика.

Рома

Жаль нету версии для «responsive design», а то видео и текст растягиваются, а вот фоторама — нет.
Пробую обернуть её в ещё один div и к нему уже применить JS тот же, что и для видео-растяжки.

Рома

Пардон. Нашёл Fluid, Hash, Fullscreen.
А если нужен только Fluid?

Даниил Пронин

Вот, что делает отсутствие документации. Хотел код, а получил заголовки.

Артём Поликарпов

Не понял.

Рома

О. Нашёл выход.
В параметрах фоторамы, ставишь with и height =100%, обвалакиваешь в респонсив див и всё.

Артём Поликарпов

width: ’100%’, height: ’auto’

Артём Самохин

Спасибо тебе большущее за Фотораму! Прямо огроменное супер спасибо!!!

Павел Супрунюк

А с горизонтальным скроллингом во Льве не разобрались?

Артём Поликарпов

Не-а. Не хватает события touchend для мейджик-мауса и тач-пада. Через mousewheel нормально сделать не получается, т. к. Лев генерирует эти события после скрола, для инерции.

Даниил Пронин

Артём, это было по поводу комментария выше. С кодом.

Геннадий Мартынов

Спасибо! Отличная штука.

Иван Малышев

Артем, большое спасибо за фотораму.

Павел Супрунюк

Артем, попробуйте в body поставить style=«overflow-x: hidden;», а в нем сразу же div style=«overflow-x: auto;». Тогда в браузерах Хром/Сафари не будет работать возврат на предыдущую страницу скроллингом.

Иоаннъ Васильевич

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

Ещё раз спасибо за хороший и качественный проект.

Роман

Супер! Лучшая фотогалерея!!! Спасибо Вам огромное за то, что Вы делаете!

Иван Малышев

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

Популярное