Автор Фоторамы расскажет о зарождении идеи, первых шагах и развитии, об особенностях дизайна и технических решениях.

1. Фоторама
Галерея для сайтов
Артём Поликарпов
@artempolikarpov

2. История

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

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

5. <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>

6. <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>

7. <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>

8. Удивительно, но люди начали
пользоваться Фоторамой
Может, из-за названия? :-)

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

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

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

13. Интерфейс

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

17. Читая и аккуратная:
http://fotoramajs.com/use/code/basic/
Тенюшки для физического ощущения
шахты, ламповый шум

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

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

25. Управление:
fotoramajs.com/use/code/basic/
Клик, стрелочки «туда-сюда», таскать,
швырять, умные превьюшки,
реалистичная физика, точки с секретом

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

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

28. Иконка полноэкранного режима:
fotoramajs.com/use/code/fluid/#1
Кстати, полноэкранный режим!

29. Резиновая Фоторама:
fotoramajs.com/use/code/responsive-blog/
Ширина в процентах, плюс minWidth,
maxWidth, minHeight, maxHeight
и aspectRatio
100%

30. Интрафейс

31. Только два файла:
fotorama.css
fotorama.js
Вся графика — ЦСС, base64, SVG

32. Эволюция подключения
Правило идеального объекта из ТРИЗа

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

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

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

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

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

38. <div class="my-gallery">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<script>
$(function () {
$('.my-gallery').fotorama();
});
</script>
Чтобы включать Фотораму по-старому,
не используйте класс fotorama

39. Опции передаются через 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>

40. Можно и привычным способом:
<script>
$(function () {
$('.my-fotorama').fotorama({
width: '100%',
aspectRatio: 1.5,
nav: 'dots',
transition: 'fade'
});
});
</script>
Дата-атрибуты продолжат работать
и будут иметь больший приоритет

41. Переопределение значений
по умолчанию для всех фоторам разом:
<script>
fotoramaDefaults = {
width: '100%',
aspectRatio: 900/600,
nav: 'dots',
transition: 'fade'
}
</script>

42. Самый простой способ указать картинки:
<div class="fotorama">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
Превьюшки сгенерируются автоматом

43. Отдельные превьюшки:
<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>
Более лучшая производительность

44. Картринки для полноэкранного режима:
<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

45. Можно указать картинки в массиве:
$('#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'}
]
});
Быстрее всего, так как Фотораме
не придётся парсить ХТМЛ, но при
отключенных скриптах будет пустота

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

47. Негативный сценарий:
fotoramajs.com/use/code/negative-
scenario/
Потерянная превьюшка, битая ссылка —
Фоторама бьётся до конца

48. ХТМЛ подключается так:
<div class="fotorama">
<div class="any-class">
<!-- Любой ХТМЛ -->
</div>
<div id="any-id">
<!-- Трам, пам -->
</div>
<div>
<!-- Пам -->
</div>
</div>

49. Даже видео:
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>
Но есть проблемы с жестами ,-(

50. 47 опций и АПИ:
fotoramajs.com/customize/
Множество возможностей

51. fotoramaDefaults = {
fullscreen: true,
hash: true
}
romanshmidt.com/#1
Полноэкранный режим и хеш, чтобы
давать ссылки на отдельные работы,
Фоторама — готовый сайт

52. fotoramaDefaults = {
autoplay: true
}
fotoramajs.com/use/code/ad-scroller/
Крутит слайд-шоу, останавливается
при касании

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

54. Ещё примеры:
fotoramajs.com/customize/
Плейграунд:
jsfiddle.net/artpolikarpov/BJRHU/

55. Процесс

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

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

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

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

60. Опенсорс?

62. Продукт!

67. > не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек,
подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал

68. > не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек,
подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал

69. > не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек,
подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал

70. > не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек,
подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал

71. fotoramajs@gmail.com
3136 сообщения,
8 писем в день
Плюс скайп, твитер, блоги
и основная почта

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

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

74. ИЕ6

75. Результат

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

78. Лицензия на Фотораму есть у 291 сайта:
fotoramajs.com/license/get/
Включая localhost :-)

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

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

81. @artempolikarpov