0,0
рейтинг
30 ноября 2011 в 19:55

Разработка → Фоторама



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

За эти месяцы Фоторама повзрослела, обзавелась сайтом с логотипом и, думаю, теперь можно написать о ней на Хабре.

На 0,1-ю версию меня вдохновили «галереи» в тревелах Артемия Лебедева. И я решил сделать что-то похоже, не выглядящее чужеродным «флешом» на странице. Сделал. Плагином начали пользоваться, присылать жалобы и предложения. Это заставило меня не останавливать работу над скриптом.

В 0,5-й версии я решил уйти от простой лебедевской кликалки, и развернуть Фотораму в сторону бюрошных галерей (см. Орион-арт и КМ/Ч). Опыт бюро отражён во всех нюансах поведения и дизайна Фоторамы.

 
Внешний вид


Ничего лишнего, что бы отвлекало от изображений и их превьюшек:



 
Управление


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



Если нажимать на превьюшки, Фоторама будет подставлять следующую под курсор, чтобы свести к минимуму движения мышью или пальцем. Саму ленту можно сдвигать в сторону и смотреть соседние наборы превьюшек.

 
Физика


У Фоторамы реалистичная физика. С какой скоростью швыряешь фотки и превьюшки, с такой они и едут. По краям натянуты виртуальные резинки. За край лента сдвигается не только мышью (пальцем), но и в конце инерционного броска.

 
Подключение


Cценарий такой: подключить свежий jquery.js, два файла Фоторамы — fotorama.css и fotorama.js, поставить картинки в некий блок, инициировать Фотораму на этом блоке конструкцией $(%block-selector%).fotorama():
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<link href="fotorama.css" type="text/css" rel="stylesheet">
<script src="fotorama.js" type="text/javascript"></script>

<div id="fotorama">
  <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg">
</div>
<script type="text/javascript">
  $(function() {
    $('#fotorama').fotorama();
  });
</script>

Ещё есть класс .fotorama_auto для автоматического превращения блоков.

 
Настройка


Для быстрого изменения внешнего вида проще не лезть в CSS, а указать новые значения прямо на инициализации — цвета фона, стрелок и «активной» рамки, размер превьюшек, отступы между ними.

Можно убрать ленту превьюшек:
$('#fotorama').fotorama({thumbsPreview: false});



Отключить жесты, включить вертикальный режим вместо горизонтального, кроп невписывающихся фотографий, резиновый ресайз, поиграть со скоростью анимаций, количеством предзагружаемых фотографий и т. д. — всего не перечесть. См. пример со всеми доступными опциями на jsFiddle.

 
API


Маленькое, но гордое API состоит из 3 компонентов. Колбека, вызываемого на смене кадров:
$('#fotorama').({
  onShowImg: function(data){
    alert('Photo #'+(data.index+1)+' is coming!');
  }
});

И двух событий, дёргая которые, можно управлять Фоторамой собственными функциями и, скажем, сделать слайд-шоу (см. реальный пример):
var i = 0;
i++;
$('#fotorama').trigger('showimg', i);

Или полноэкранный режим:
$('#fotorama').trigger('rescale', [$(window).width(), $(window).height()]);


 
HTML


Поверх изображений можно разместить любой произвольный HTML:



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

 
Загрузка и ошибки


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

Пока фотография не загрузилась, крутится прелоадер, а рамка вокруг актуальной превьюшки становится прерывистой:



Битая фотография подменяется растянутой превьюшкой:



А если и превьюшки нет на месте, то так:



 
Технологии


Фоторама не использует в своём интерфейсе ни одной картинки, спрайт прелоадера и знак ошибки — это PNG в data:url. В современных браузерах все анимации сделаны на CSS3 с 3d-трансформациями для включения аппаратного ускорения в мобильном Вебките. Превьюшки отрисовываются с помощью canvas.

При этом всё нормально работает и в антикварных браузерах, даже в IE6:



Деградации такие: нет data:url — делаем прелоадер из многоточия, нет поддержки CSS-анимаций — анимируем джаваскриптом, нет canvas — сжимаем обычную картинку, нет тенюшек — ну и ладно.

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

 
<noscript>


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

 
Примеры использования


Несколько страниц с Фоторамой:

Если бы Фоторама была 2 года назад, главная Орион-арта не обошлась бы без неё.

 
Разработка и лицензия


Работа над плагином коммитится на Гитхабе.

Не нужно спрашивать разрешения и как-то упоминать Фотораму, если вы используете её в личных некоммерческих целях. Использование в корпоративных и/или коммерческих целях следует обсудить со мной.

Какой бы вред Фоторама вам не нанесла, никто не ответственен за это. Страх и риск!

 
Будущее


Полноэкранный режим прямо «из коробки», управление колесом мыши, жестами на трекпаде, больше оптимизаций и структуризаций кода.

 
fotoramajs.com


 
Артём Поликарпов @artpolikarpov
карма
87,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (111)

  • +25
    Классная галерея! Работает из коробки, гибкая, не требует никаких специальных настроек на сервере и клиенте, не ломает сайт при отключённых скриптах, шустро работает на мобильных устройствах. Просто праздник на колёсиках!
  • +3
    finegoodsmarket.com/view/ тоже очень крутая.
    • 0
      Однако денег стоит
  • +31
    Рекомендую вместо формулировки «Использование в корпоративных и/или коммерческих целях следует обсудить со мной» использовать что-то другое. Поставьте цену, или какую-то лицензию — наврядли у кого-то возникнет желание связываться с автором для использования галереи. Некоммерческий проект это, скорее, исключение для обычного веб-разработчика.
    • +1
      Действительно уж. Не нравится GPL — выставьте хоть BSD.
  • +1
    Перевел спасибо, на ЯД не большое, но от всей души. Обязательно в ближайшее время воспользуюсь, потому что как раз нужно было именно подобное.
    Ну и еще раз просто спасибо! Вы проделали большую работу и получили великолепный результат.
  • +2
    Очень хороший инструмент. Мы используем Фотораму на студийном сайте для демонстрации состояний одной веб-страницы, например. Очень удобно.
  • +5
    Пожалуй, лучшая реализация интернет-галереи, которую Я когда-либо видел. Пользоваться просто и удобно.
  • 0
    Хорошо бы механизм подписей отвязать от alt и подружить с HTML. Ведь кучку дополнительного кода многие захотят назвать костылём.
    • +2
      ХТМЛ теперь вставляется штатными средствами, можно даже так:
      $('#fotorama').fotorama({
        html: {
          0: '<div class="caption">Раз-раз</div>',
          1: $('#special-ad'),
          2: $('.story').eq(3)
      });

      Пример на Фидле: jsfiddle.net/artpolikarpov/qB7ft/

      • 0
        Хм, в прошлый раз на том же фидле (та же ссылка) было вот это: pastebin.com/FYN5RSfm (только Я испортил код и он не захотел работать).
      • 0
        Попробовал это сделать с тремя фоторамами — ничего не получилось: grawl.ru/beta.html (см. исходник)
        • 0
          Я ошибся лишь в селекторе при определении переменной html.
          Как-то так: var html = $('.b-slide', '#блок*');
          *блок — родительский блок, содержащий в себе и Фотораму, и блок #html, в котором находятся контейнеры .b-slide.
      • +2
        Всё же, имхо, логичнее по умолчанию привязывать к title, а не к alt.
  • +5
    Если зайти на сайт «Фоторамы» и с зажатым шифтом понаводить курсор на её логотип, будет прикольно. :)
    • +1
      А Я всё голову ломал: “зачем логотип распилен на несколько картинок?”
    • +3
      А ещё можно кликнуть по фотке или превьюшке с зажатым альтом или шифтом, и даже с шифтом и альтом разом :-)
      • 0
        Opera 11.6, Linux. Как-то оно неадекватно работает (срабатывает далеко не каждый раз, и логика не понятна). Плюс в линуксе комбинации alt+click не работают, т.к. alt+click/drag — это функция таскания окна.
        • 0
          Ну там не такой уж важный функционал на альте :)
    • 0
      Странно, что не просто по наведению сделано. И так мало кто увидит, а тут вообще только для посвящённых.
      • +1
        Ну это же пасхальное яйцо.
      • 0
        Просто по наведению есть вот тут: talala.ru/works/fotorama/ ;)
  • 0
    Офигенно. Спасибо!
  • +1
    Отличный плагин, спасибо, что поделились. Выглядит очень аккуратно и эстетично. Субъективно — самый интересный, из которых я видел.
  • +2
    Из того что сразу бросилось в глаза и напрягло (но может это только мое чувство прекрасного)

    Сделайте так, чтоб при клике на правую часть фотографии — моталось вперед, а при клике на левую половину — назад. Иначе выходит, что для прокрутки назад, необходимо поработать снайпером и попасть в стрелочку :)

    PS. А все-таки, для коммерческого использования сколько?
    • +3
      Деньги не обязательны ;-)
      • 0
        А что тогда? Если на галерее непосредственно деньги не зарабатываются (т.е. фотографии не являются продуктом), она просто используется, например, в блоге или на страницах сайта фирмы. Что тогда?
    • +1
      Сделал «чтоб при клике на правую часть фотографии — моталось вперед, а при клике на левую половину — назад».
      • 0
        Раньше при клике по последней фотографии фоторама листалась на первую, а теперь ничего не происходит. Думаю, функцию стоит вернуть на правую половину последнего слайда.
  • 0
    Укажите, пожалуйста, на сайте fotoramajs.com ссылочку на GitHub репозиторий.
    А то так приходися сохранять в закладки 2 линка, либо фоловить на гитхабе.
    Спасибо.
    • +1
      Можете еще и @fotoramajs зафоловить ;-) А вообще, ссылку на Гитхаб я не пиарю намеренно, продукт сама Фоторама, а не её исходный код.
      • 0
        Понял, маркетинг :)
    • +1
      Сохраните в закладки статью.
      • 0
        Дельный совет :)
  • 0
    Хорошая галерея

    из пожеланий:
    в демо можно показать как она себя ведет когда картинки разных пропорций, можно еще добавить горячие клавиши (стрелка вперед назад), при клике на последнюю видимую превьюху лучше ставить ее по середине (так быстрее можно будет пробежаться по списку без просмотра каждой картинки)
    • +1
      Если порефрешить fotoramajs.com, то там будут разные фотки в том числе и не вписывающиеся в заданные пропорции.
    • +1
      Быстрее пробежаться по превьюшкам можно просто перетащив их. А сдвиг на одну сделан для того, чтобы можно было неглядя кликать по одному месту и видеть следующую.
      • 0
        перетаскивание превью круто, но мель кто догадается

        можно сделать опцию чтобы и превью и точки были
        пример: smotra.ru/users/maks95/gallery/album/131642/view/1124798/

        или, что вообще круто будет, добавить взаимодействие со скролом на мышке для превьюх и для фото
        • +1
          Мышиное колесо в планах.
    • +1
      Горячие клавиши (стрелки и пробел) прикручены к Трёмдиафильмам с помощью АПИ, описанного в статье. Штатно этого нет потому, что если фоторам на странице несколько не понятно, какой управлять.
      • 0
        если несколько галерей то можно подключать горячие клавиши к галерее по которой в последний раз кликали или на которую мышку наводили
  • +1
    А можно ещё сделать, чтоб по клику в центре картинки показывалась большая оригинальная картин(ищ)а в новом табе?
    • 0
      А лучше — в лайтбоксе!
      • 0
        Может быть. Честно говоря, не видел примеров, как 4000х3000 откроется в лайтбоксе. Главное, чтоб можно было посмотреть фото 1:1 и сохранить оригинал.
        • 0
          Я обычно делаю 3 версии: миниатюра (около 200×150тчк), большая (около 1000×700тчк) и оригинал. В браузере — миниатюра и большая. Оригинал — в новой вкладке, весь файл.
  • +3
    Гм, какие-то знакомые картинки для загрузчика и недоступной фотки :) Не из Дакрбокса случайно?
    • +3
      Глаз — алмаз. Какое будет наказание?
      • +4
        Ну, когда сам рисовал — всегда помнишь ;) Приятно, что пригодились где-то ещё.
      • +3
        Я вот думаю — может повторить успех Фоторамы и довести Даркбокс до ума? Например, поделить код между ними… Будет весьма себе комплексное решение. Ну, так — подумалось.
        • +2
          Не знаю стоит ли их дружить, но некоторые идеи по Дакбоксу у меня есть. С удовольствием пообщаюсь с тобой про это.
        • 0
          да, да, да. Совсем недавно нужен был именно такой функционал: галерея с превьюшками + открытие большой картинки в лайтбоксе.

          В итоге ничего толкового не нашел.

          Если сделаете – будет очень здорово!
  • 0
    Очень понравилось что можно на тачскрине пальцем пролистывать изображения.
  • 0
    Классно, ещё бы превьюшки подгружались как на geometria.ru
  • 0
    Использовал, понравилось, думаю буду еще использовать
  • 0
    Мне почему-то кажется, что действия для кликов с зажатыми Alt/Shift перепутаны. Клик+Alt должен листать галерею в обратном направлении, а клик+Shift — «замедлять» переход.
  • 0
    а как сделать что бы превью генерировались сверху?
    • +2
      Добавить немного уличной магии CSS:
      .fotorama__wrap { top: 58px; }
      .fotorama__thumbs { position: absolute; top: 0; }


      Живой пример: http://jsfiddle.net/artpolikarpov/tLeD5/.
      • 0
        меня такой вариант не устраивал, не помню почему, поэтому я залез в библиотеку и заменил на вставку в начала родителя%) хотел метод прикрутить, но не осилил минмизированый код, а вообще было бы круто добавить! Спасибо за плагин!)
        • 0
          > не осилил минмизированый код
          так есть же исходники на GitHub
  • 0
    Отличный скрипт, буду внедрять у себя на сайте. Держите донейт (paypal)
  • –1
    Может быть не в тему, но уже не в первый раз (вчера такое было на mail.yandex.ru)…
    Зашел на сайт скрипта и увидел синюю страницу

    OS. CalculateLinux
    Br. 15.0.874.121 (Сборка для разработчиков 0 Linux)

    Кто-нить может подсказать что это может быть. Такое ощущение, что из-за css3.
    • +1
      Да, это 3d-трансформации так иногда глючат. Чаще на слабых компах.
  • 0
    Прошу прощения, а можно использовать эффект затемнения вместо слайда? Что-то не вижу в настройках.
    • +1
      touchStyle: false;
  • +1
    во! то что надо. Прям сегодня и опробуем.
    • 0
      Подскажите, можно ли при бездействии пользователя, скажем в 20 секунд, автоматом перелистывать картинку?
      • 0
        В статье есть даже ссылка на пример слайд-шоу, сделанного с помощью АПИ Фоторамы:
        jsfiddle.net/artpolikarpov/JAw2t/

        Вот пример попроще:
        jsfiddle.net/artpolikarpov/uBmD5/

        Штатного функционала для авто-проигрывания нет.
        • 0
          оу. спасибо за ответ! Сделал пока примерно как в «примитивном», сейчас переделаю по 1му примеру.
        • 0
          а было бы хорошо встроить это в Фотораму
  • 0
    Мне кажется, очень не хватает управления с клавиатуры.
    А так да — очень хорошая галерейка
    • 0
      #comment_4439432
  • 0
    Артём, ты меня игнорируешь в почте :( Вопрос есть по твоему плагину.
    • +1
      Женя, я лёг под хабраэффектом. Сейчас отвечу.
  • +2
    Суперски!
    Есть одно пожелание: при наведении на фотку показывать яркими белыми не обе стрелки, а только ту, куда произойдет перемотка, если кликнем в этом месте. А вторую стрелку подсветить бледней, типа есть обе, но сейчас активная вот эта, что ярче. Мне думается, это было бы удобно.
    • +1
      Возможно, так и сделаю.
  • 0
    А есть какая-то возможность не грузить все превью сразу?
    • 0
      Сейчас нет.
      • 0
        А есть идеи как это сделать? Нужно прямо сейчас ). Как я понимаю ограничение только в том, что без загрузки нельзя узнать размеры?
        • 0
          «Нужно прямо сейчас» не получится.
        • 0
          А вообще, напишите подробнее, что у вас есть и что вы хотите получить. Примеры кода и ссылки ускорят ответ.
  • 0
    Спасибо за плагин! Не смог разобраться как див с фоторамой поместить по центру резиновой страницы, чтобы при изменения размеров браузера он всегда был по центру.
    • 0
      margin: 0 auto?
      • 0
        Да, нужен авто-маргин и явная ширина для блока .fotorama, например так:
        .fotorama { width: 700px; margin 0 auto; }
  • 0
    Почему на страницах при использовании Фоторамы scrollbar окрашивается в непонятный цвет? Как это убрать?
    Замечено в Хроме — my.jetscreenshot.com/2366/20111205-iwmq-246kb.jpg
    • 0
      Офигеть! Это на всех-всех страницах с Фоторамой или только на fotoramajs.com?
      • 0
        Ну походу везде ;)

        А еще глюк заметил в Хроме. При масштабировании окна происходит нечто странное. Скажем берем правый край окна и уменьшаем его — скроллбар глючит. Вот например — my.jetscreenshot.com/2366/20111205-m8qm-205kb.jpg

        У меня к сожалению нет возможности проверить на других компах.
    • 0
      Проверил несколько браузеров.
      В Опере, FF и Safari все окей.
  • 0
    Прикрутил этот скрипт на сайт на котором используется jquery 1.2.6. Возникла проблема при использовании jquery 1.2.6 не работает фоторама, при использовании jquery 1.7.1 не работает часть функционала на сайте. Подскажите как можно решить эту проблему, сам я в яве не силен. Заранее спасибо.
    • 0
      Попробуйте такой «хак»:
      1) подключаете оба jquery и Фотораму;
      2) в 1.7.1 и в fotorama.js делаете поиск с заменой jQuery → jQuery171 (регистр важен);
      3) профит!
      • 0
        К сожалению не помогло.
  • 0
    Отличный плагин, спасибо!
    Как сделать чтобы при touchStyle: false не пропадали стрелки (при этом стоит arrows: true)? Это баг или фича?
    • 0
      На сегодняшний день — это фича :-)
  • +1
    Плагин — мечта!

    Пол дня колдую, но отступ снизу так и остался — strelcova.com/ipad.html

    Не хочет галерея все свободное пространство занимать.
    • 0
      Не хочет, потому что resize: true сделан не для полноэкранного режима, а для вписывания в колонки вёрстки. При этом плагин всегда следит, чтобы не вылезти за высоту экрана.

      Для полноэкранного режима воспользуйтесь АПИ, после инициализации Фоторамы напишите:
      var $window = $(window);
      function fullScreen() {
        var windowWidth = $window.width();
        var windowHeight = $window.height();
        $('#fotorama').trigger('rescale', [windowWidth, windowHeight]);
      }
      fullScreen();
      $window.resize(function(){
        fullScreen();
      });


      В опциях уберите resize: true, cropToFit — по вкусу ;-)
    • 0
      Кстати, чтобы и превьюшки влезли в экран, нужно как-то так сделать:
      var windowHeight = $window.height() - $('.fotorama__thumbs', '#fotorama').height();
      • 0
        Я немного по-другому сделал, немного изменил в css и получилось именно то, что я хотел: точки-индикаторы над картинкой.

        Изменения в css:
        .fotorama__wrap { margin-bottom: -20px; position: relative; overflow: hidden; *zoom: 1; background-color: #323130; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none;}

        .fotorama__thumbs {text-align: center; position: relative; min-height: 18px; font-size: 0; line-height: 0; z-index: 10;}
  • 0
    Я тут немного поработал с Фоторамой, и получилось то, что можно лицезреть на главной Моего сайта: grawl.ru/. Использую её для показа портфолио. На странице три фоторамы, и они не ссорятся. Я использовал по полной механизм встраивания в Фотораму произвольного HTML, чтобы получить подписи к слайдам, ссылки на сайты работ и ссылки на полные версии изображений. Последние Я вызываю на весь экран с помощью jQuery Tools Overlay. Получилось хорошо (нужно нажать на лупу, чтобы посмотреть).
    Точки-индикаторы поменял на кружочки (подсмотрел у Дениса Талала́, вот тут: talala.ru/works/characters/)
    Бывает — иногда фоторамы в табах (скрытые) сломаются, но с чем это связать — не знаю. Возможно, с Инспектором в Google Chrome, но не уверен.
    Уже думаю над тем, чтобы организовать весь получившийся HTML с помощью какой-нибудь БД, а то кода прям очень много (±270 строк с повторяющимися ссылками, классами и прочим). Попробую на PHP, хех. А в качестве БД использовать что посоветуете? Есть MySQL на сервере, но слышал хорошие вещи об NoSQL.
    • 0
      Ломаются скрытые галереи скорее всего из-за того, что скрываются через display: none, рекомендую попробовать другие способы, например position: absolute; visibility: hidden.
      • 0
        Значит, нужно менять jQuery Tools Tabs на что-то другое, более упраляемое. Ладно, это уже не касается Фоторамы.
  • 0
    Уже день сижу думаю как встроить социальные лайки от контакта и фейсбука. Идея в том что у каждой фотографии будет отдельный адрес и нужно автоматически подставлять этот уникальный url для каждой фотографии в параметры социокнопки. Можно было бы сделать через html но не хочется чтобы еще и кнопки летали, да и код громоздкий получается.

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

    Полноэкранный режим подсмотрел на диафильмах, отлично работает с настройками по умолчанию, но при подключении фишки сворачивания превью остается пустое место снизу.
    Может кому пригодится — листание стрелками клавиатуры тоже из диафильмов, листание колесиком мышки — плагин jquery.mousewheel
    • 0
      Если не секрет, получилось встроить в fullscreen вариант лайки и каким образом?
  • 0
    Спасибо большое за отменную работу. Плагин очень пригодился, сделал галерею с «flash degradation» -> html5 на photo.kiev.ua
  • 0
    извиняюсь за нубство но не могу сделать что бы контейнер был на 100% а фото оставались орегинальными (ширина фысота) ставлю 100% в

  • 0
    в

    не проходит 100% так как контейнер и картинки идут все на 100% а нужно только контейнер, вот так:

    • 0
      Попробуйте zoomToFit:false?
  • 0
    Сейчас ничего не изменилось в лицензировании — для личного использования бесплатная?
    • +1
      • 0
        Я это читал, но так и не понял ответа на свой вопрос.

        Как выдается лицензия? Как проверяется на скольких доменах используется? На честном слове?

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