Riak — простая, предсказуемая и масштабируемая БД. Преимущества и недостатки .
Артём Поликарпов - Фоторама - простая и мощная галерея...
description
Transcript of Артём Поликарпов - Фоторама - простая и мощная галерея...
![Page 1: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/1.jpg)
ФоторамаГалерея для сайтов
Артём Поликарпов@artempolikarpov
![Page 2: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/2.jpg)
История
![Page 3: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/3.jpg)
На версию 0.1 вдохновили «галереи»в тревелах Лебедева:tema.ru/travel/taimyretnoexp-2/
![Page 4: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/4.jpg)
Примерно такой была Фоторама 0.1:fotoramajs.com/use/code/futurama/
Не было ничего
![Page 5: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/5.jpg)
<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>
![Page 6: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/6.jpg)
<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>
![Page 7: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/7.jpg)
<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>
![Page 8: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/8.jpg)
Удивительно, но люди начали пользоваться Фоторамой
Может, из-за названия? :-)
![Page 9: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/9.jpg)
Вещи становятся любимыми, благодаря тому, чего в них нет
![Page 10: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/10.jpg)
В версии 0.5 ушёл от простой кликалки
![Page 11: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/11.jpg)
Бюрошные галереи: orion-art.ru km4.artgorbunov.ru/model.html
![Page 12: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/12.jpg)
![Page 13: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/13.jpg)
Интерфейс
![Page 14: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/14.jpg)
Сравните внешний вид 1-й и 3-й версии:
![Page 15: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/15.jpg)
![Page 16: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/16.jpg)
![Page 17: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/17.jpg)
Читая и аккуратная:http://fotoramajs.com/use/code/basic/
Тенюшки для физического ощущения шахты, ламповый шум
![Page 18: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/18.jpg)
Анимированный гиф, некрасота:
![Page 19: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/19.jpg)
Векторная СВГ-крутилка хорошо смотрится на любом фоне, можно менять её цвет в настройке
![Page 20: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/20.jpg)
![Page 21: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/21.jpg)
![Page 22: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/22.jpg)
![Page 23: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/23.jpg)
![Page 24: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/24.jpg)
![Page 25: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/25.jpg)
Управление:fotoramajs.com/use/code/basic/
Клик, стрелочки «туда-сюда», таскать, швырять, умные превьюшки, реалистичная физика, точки с секретом
![Page 26: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/26.jpg)
Главное правило экранных интерфейсов в вёрстке:artpolikarpov.ru/html/16-16/
Закон Фитса
![Page 27: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/27.jpg)
Наплыв, а не кроссфейд:artpolikarpov.ru/html/fade/
![Page 28: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/28.jpg)
Иконка полноэкранного режима:fotoramajs.com/use/code/fluid/#1
Кстати, полноэкранный режим!
![Page 29: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/29.jpg)
Резиновая Фоторама:fotoramajs.com/use/code/responsive-blog/
Ширина в процентах, плюс minWidth, maxWidth, minHeight, maxHeight и aspectRatio
100%
![Page 30: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/30.jpg)
Интрафейс
![Page 31: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/31.jpg)
Только два файла: fotorama.css fotorama.js
Вся графика — ЦСС, base64, SVG
![Page 32: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/32.jpg)
Эволюция подключения
Правило идеального объекта из ТРИЗа
![Page 33: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/33.jpg)
<div id="fotorama"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"></div>
<script> $(function () { $('#fotorama').fotorama(); });</script>
![Page 34: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/34.jpg)
<div id="fotorama"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"></div>
<script> $(function () { $('#fotorama').fotorama(); });</script>
![Page 35: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/35.jpg)
<div class="fotorama"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"></div>
<script> $(function () { $('#fotorama').fotorama(); });</script>
![Page 36: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/36.jpg)
Завернуть картинки в див с классом fotorama, больше ничего. Ширину и высоту Фоторама определит самостоятельно.
![Page 37: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/37.jpg)
Идеальный объект — тот, которого нет, но его функция выполняется
![Page 38: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/38.jpg)
<div class="my-gallery"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"></div>
<script> $(function () { $('.my-gallery').fotorama(); });</script>
Чтобы включать Фотораму по-старому, не используйте класс fotorama
![Page 39: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/39.jpg)
Опции передаются через 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>
![Page 40: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/40.jpg)
Можно и привычным способом:
<script> $(function () { $('.my-fotorama').fotorama({ width: '100%', aspectRatio: 1.5, nav: 'dots', transition: 'fade' }); });</script>
Дата-атрибуты продолжат работать и будут иметь больший приоритет
![Page 41: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/41.jpg)
Переопределение значений по умолчанию для всех фоторам разом:
<script> fotoramaDefaults = { width: '100%', aspectRatio: 900/600, nav: 'dots', transition: 'fade' }</script>
![Page 42: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/42.jpg)
Самый простой способ указать картинки:
<div class="fotorama"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg">
</div>
Превьюшки сгенерируются автоматом
![Page 43: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/43.jpg)
Отдельные превьюшки:
<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>
Более лучшая производительность
![Page 44: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/44.jpg)
Картринки для полноэкранного режима:
<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
![Page 45: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/45.jpg)
Можно указать картинки в массиве:
$('#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'} ]});
Быстрее всего, так как Фотораме не придётся парсить ХТМЛ, но при отключенных скриптах будет пустота
![Page 46: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/46.jpg)
Фоторама подгружает только на три картинки вперёд
![Page 47: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/47.jpg)
Негативный сценарий:fotoramajs.com/use/code/negative-scenario/
Потерянная превьюшка, битая ссылка — Фоторама бьётся до конца
![Page 48: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/48.jpg)
ХТМЛ подключается так:
<div class="fotorama"> <div class="any-class"> <!-- Любой ХТМЛ --> </div> <div id="any-id"> <!-- Трам, пам --> </div> <div> <!-- Пам --> </div></div>
![Page 49: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/49.jpg)
Даже видео: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>
Но есть проблемы с жестами ,-(
![Page 50: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/50.jpg)
47 опций и АПИ:fotoramajs.com/customize/
Множество возможностей
![Page 51: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/51.jpg)
fotoramaDefaults = { fullscreen: true, hash: true}
romanshmidt.com/#1
Полноэкранный режим и хеш, чтобы давать ссылки на отдельные работы, Фоторама — готовый сайт
![Page 52: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/52.jpg)
fotoramaDefaults = { autoplay: true}
fotoramajs.com/use/code/ad-scroller/
Крутит слайд-шоу, останавливается при касании
![Page 53: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/53.jpg)
Можно управлять Фоторамой через собственные функции:fotoramajs.com/use/code/api/
fotoramajs.com/use/code/product-showcase/
![Page 54: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/54.jpg)
Ещё примеры:fotoramajs.com/customize/
Плейграунд:jsfiddle.net/artpolikarpov/BJRHU/
![Page 55: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/55.jpg)
Процесс
![Page 56: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/56.jpg)
Тестирование анимаций
Замедление с зажатым альтом
#quirks в адресной строке для быстрого тестирования анимаций без поддержки ЦСС3
![Page 57: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/57.jpg)
Вебшторм для написания кода:jetbrains.com/webstorm/
The smartest JavaScript IDE
![Page 59: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/59.jpg)
100500+ браузеров и устройств для проверки
![Page 60: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/60.jpg)
Опенсорс?
![Page 61: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/61.jpg)
![Page 62: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/62.jpg)
Продукт!
![Page 63: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/63.jpg)
![Page 64: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/64.jpg)
![Page 65: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/65.jpg)
![Page 66: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/66.jpg)
![Page 67: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/67.jpg)
> не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек, подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал
![Page 68: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/68.jpg)
> не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек, подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал
![Page 69: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/69.jpg)
> не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек, подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал
![Page 70: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/70.jpg)
> не могу другу послать ссылку на конкретную картинку
Добавил хэш
> очень долго грузится
Веерная инициализация
> нельзя посмотреть, что есть в контрольках
Включил таскание превьюшек, подъезжание под курсор следующей
> тыкать не в треугольничек, а на весь левый или правый край
Отличная идея, сделал
![Page 71: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/71.jpg)
3136 сообщения,8 писем в день
Плюс скайп, твитер, блогии основная почта
![Page 72: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/72.jpg)
Ответственность
![Page 73: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/73.jpg)
Андроид
Купил планшет на пожертвования, например
![Page 74: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/74.jpg)
ИЕ6
![Page 75: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/75.jpg)
Результат
![Page 76: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/76.jpg)
![Page 77: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/77.jpg)
Сайт:fotoramajs.com
Сделать продукт и рассказать о нём — две большие разницы
![Page 78: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/78.jpg)
Лицензия на Фотораму есть у 291 сайта:fotoramajs.com/license/get/
Включая localhost :-)
![Page 79: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/79.jpg)
ВордпрессЭгея—————Джумла,Битрикс,Друпал,Лайвстрит,Инстант...
![Page 80: Артём Поликарпов - Фоторама - простая и мощная галерея на JS | Happydev'12](https://reader030.fdocument.pub/reader030/viewer/2022020206/548044f25806b5f45e8b49ee/html5/thumbnails/80.jpg)
@fotoramajs.com@[email protected]@fotoramajs