ФоторамаГалерея для сайтов

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

История

На версию 0.1 вдохновили «галереи»в тревелах Лебедева:tema.ru/travel/taimyretnoexp-2/

Примерно такой была Фоторама 0.1:fotoramajs.com/use/code/futurama/

Не было ничего

<script src="jquery-1.8.2.min.js"></script><link href="fotorama.css" rel="stylesheet"><script src="fotorama.js"></script>

<div class="fotorama"> <img src="01.jpg"> <img src="02.jpg"> <img src="03.jpg"></div>

<script> $(function () { $('.fotorama').fotorama(); });</script>

<script src="jquery-1.8.2.min.js"></script><link href="fotorama.css" rel="stylesheet"><script src="fotorama.js"></script>

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

<script> $(function () { $('.fotorama').fotorama(); });</script>

<script src="jquery-1.8.2.min.js"></script><link href="fotorama.css" rel="stylesheet"><script src="fotorama.js"></script>

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

<script> $(function () { $('#fotorama').fotorama(); });</script>

Удивительно, но люди начали пользоваться Фоторамой

Может, из-за названия? :-)

Вещи становятся любимыми, благодаря тому, чего в них нет

В версии 0.5 ушёл от простой кликалки

Бюрошные галереи: orion-art.ru km4.artgorbunov.ru/model.html

Интерфейс

Сравните внешний вид 1-й и 3-й версии:

Читая и аккуратная:http://fotoramajs.com/use/code/basic/

Тенюшки для физического ощущения шахты, ламповый шум

Анимированный гиф, некрасота:

Векторная СВГ-крутилка хорошо смотрится на любом фоне, можно менять её цвет в настройке

Управление:fotoramajs.com/use/code/basic/

Клик, стрелочки «туда-сюда», таскать, швырять, умные превьюшки, реалистичная физика, точки с секретом

Главное правило экранных интерфейсов в вёрстке:artpolikarpov.ru/html/16-16/

Закон Фитса

Наплыв, а не кроссфейд:artpolikarpov.ru/html/fade/

Иконка полноэкранного режима:fotoramajs.com/use/code/fluid/#1

Кстати, полноэкранный режим!

Резиновая Фоторама:fotoramajs.com/use/code/responsive-blog/

Ширина в процентах, плюс minWidth, maxWidth, minHeight, maxHeight и aspectRatio

100%

Интрафейс

Только два файла: fotorama.css fotorama.js

Вся графика — ЦСС, base64, SVG

Эволюция подключения

Правило идеального объекта из ТРИЗа

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

<script> $(function () { $('#fotorama').fotorama(); });</script>

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

<script> $(function () { $('#fotorama').fotorama(); });</script>

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

<script> $(function () { $('#fotorama').fotorama(); });</script>

Завернуть картинки в див с классом fotorama, больше ничего. Ширину и высоту Фоторама определит самостоятельно.

Идеальный объект — тот, которого нет, но его функция выполняется

<div class="my-gallery"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"></div>

<script> $(function () { $('.my-gallery').fotorama(); });</script>

Чтобы включать Фотораму по-старому, не используйте класс fotorama

Опции передаются через data-атрибуты:

<div class="fotorama" data-width="100%" data-aspectRatio="1.5" data-nav="dots" data-transition="fade"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"></div>

Можно и привычным способом:

<script> $(function () { $('.my-fotorama').fotorama({ width: '100%', aspectRatio: 1.5, nav: 'dots', transition: 'fade' }); });</script>

Дата-атрибуты продолжат работать и будут иметь больший приоритет

Переопределение значений по умолчанию для всех фоторам разом:

<script> fotoramaDefaults = { width: '100%', aspectRatio: 900/600, nav: 'dots', transition: 'fade' }</script>

Самый простой способ указать картинки:

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

</div>

Превьюшки сгенерируются автоматом

Отдельные превьюшки:

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

Более лучшая производительность

Картринки для полноэкранного режима:

<div class="fotorama"> <a rel="1_full.jpg" href="1.jpg"> <img src="1_preview.jpg"> </a> <a rel="2_full.jpg" href="2.jpg"> <img src="2_preview.jpg"> </a> <a rel="3_full.jpg" href="3.jpg"> <img src="3_preview.jpg"> </a></div>

Хоть 1920×1080

Можно указать картинки в массиве:

$('#my-fotorama').fotorama({ data: [ {img: '1.jpg', thumb: '1_pre.jpg', full: '1_big.jpg'}, {img: '2.jpg', thumb: '2_pre.jpg', full: '2_big.jpg'}, {img: '3.jpg', thumb: '3_pre.jpg', full: '3_big.jpg'} ]});

Быстрее всего, так как Фотораме не придётся парсить ХТМЛ, но при отключенных скриптах будет пустота

Фоторама подгружает только на три картинки вперёд

Негативный сценарий:fotoramajs.com/use/code/negative-scenario/

Потерянная превьюшка, битая ссылка — Фоторама бьётся до конца

ХТМЛ подключается так:

<div class="fotorama"> <div class="any-class"> <!-- Любой ХТМЛ --> </div> <div id="any-id"> <!-- Трам, пам --> </div> <div> <!-- Пам --> </div></div>

Даже видео:fotoramajs.com/use/code/video/

<div class="fotorama"> <iframe src="http://player.vimeo.com/video/41369274" ...></iframe> <iframe src="http://player.vimeo.com/video/41406753" ...></iframe> <iframe src="http://player.vimeo.com/video/41032467" ...></iframe></div>

Но есть проблемы с жестами ,-(

47 опций и АПИ:fotoramajs.com/customize/

Множество возможностей

fotoramaDefaults = { fullscreen: true, hash: true}

romanshmidt.com/#1

Полноэкранный режим и хеш, чтобы давать ссылки на отдельные работы, Фоторама — готовый сайт

fotoramaDefaults = { autoplay: true}

fotoramajs.com/use/code/ad-scroller/

Крутит слайд-шоу, останавливается при касании

Можно управлять Фоторамой через собственные функции:fotoramajs.com/use/code/api/

fotoramajs.com/use/code/product-showcase/

Ещё примеры:fotoramajs.com/customize/

Плейграунд:jsfiddle.net/artpolikarpov/BJRHU/

Процесс

Тестирование анимаций

Замедление с зажатым альтом

#quirks в адресной строке для быстрого тестирования анимаций без поддержки ЦСС3

Вебшторм для написания кода:jetbrains.com/webstorm/

The smartest JavaScript IDE

Грант для сборки файлов:gruntjs.com

100500+ браузеров и устройств для проверки

Опенсорс?

Продукт!

> не могу другу послать ссылку на конкретную картинку

Добавил хэш

> очень долго грузится

Веерная инициализация

> нельзя посмотреть, что есть в контрольках

Включил таскание превьюшек, подъезжание под курсор следующей

> тыкать не в треугольничек, а на весь левый или правый край

Отличная идея, сделал

> не могу другу послать ссылку на конкретную картинку

Добавил хэш

> очень долго грузится

Веерная инициализация

> нельзя посмотреть, что есть в контрольках

Включил таскание превьюшек, подъезжание под курсор следующей

> тыкать не в треугольничек, а на весь левый или правый край

Отличная идея, сделал

> не могу другу послать ссылку на конкретную картинку

Добавил хэш

> очень долго грузится

Веерная инициализация

> нельзя посмотреть, что есть в контрольках

Включил таскание превьюшек, подъезжание под курсор следующей

> тыкать не в треугольничек, а на весь левый или правый край

Отличная идея, сделал

> не могу другу послать ссылку на конкретную картинку

Добавил хэш

> очень долго грузится

Веерная инициализация

> нельзя посмотреть, что есть в контрольках

Включил таскание превьюшек, подъезжание под курсор следующей

> тыкать не в треугольничек, а на весь левый или правый край

Отличная идея, сделал

fotoramajs@gmail.com

3136 сообщения,8 писем в день

Плюс скайп, твитер, блогии основная почта

Ответственность

Андроид

Купил планшет на пожертвования, например

ИЕ6

Результат

Сайт:fotoramajs.com

Сделать продукт и рассказать о нём — две большие разницы

Лицензия на Фотораму есть у 291 сайта:fotoramajs.com/license/get/

Включая localhost :-)

ВордпрессЭгея—————Джумла,Битрикс,Друпал,Лайвстрит,Инстант...

@fotoramajs.com@fotoramajs@gmail.com@fotoramajs

@artempolikarpov