Артём Поликарпов - Фоторама - простая и мощная галерея...
Post on 02-Dec-2014
2.383 Views
Preview:
DESCRIPTION
TRANSCRIPT
ФоторамаГалерея для сайтов
Артём Поликарпов@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
100500+ браузеров и устройств для проверки
Опенсорс?
Продукт!
> не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек, подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал
> не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек, подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал
> не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек, подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал
> не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек, подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал
fotoramajs@gmail.com
3136 сообщения,8 писем в день
Плюс скайп, твитер, блогии основная почта
Ответственность
Андроид
Купил планшет на пожертвования, например
ИЕ6
Результат
Сайт:fotoramajs.com
Сделать продукт и рассказать о нём — две большие разницы
Лицензия на Фотораму есть у 291 сайта:fotoramajs.com/license/get/
Включая localhost :-)
ВордпрессЭгея—————Джумла,Битрикс,Друпал,Лайвстрит,Инстант...
@fotoramajs.com@fotoramajs@gmail.com@fotoramajs
top related