Артём Поликарпов, заметки с тегом: Фоторама

Фоторама в Эгее 2.4

Fri, 09 May 2014 16:54:50 +0400

В Эгее 2.4, которая пока ещё бета, Фоторама работает из коробки. Чтобы несколько картинок превратились в фотораму, нужно поставить их названия подряд:

sun.jpg
sky.jpg
mama.jpg

И всё!

Движок не добавляет никаких опций фоторамам, кроме ширины и соотношения сторон. Настройте Фотораму на свой вкус в файле user/extras/header-pre.tmpl.php:

<script>
  fotoramaDefaults = {
    allowfullscreen: 'native', // нативный полный экран
    loop: true, // зациклить кадры
    navposition: 'top' // точки над фоторамой
  }
</script>

Список опций на сайте Фоторамы.

Всего хорошего :-)

Бета Фоторамы для Вордпресса

Tue, 13 Aug 2013 23:00:04 +0400

Я вчера не выдержал и сам написал плагин, превращающий стандартные вордпрессовские галереи в фоторамы. Пока вордпрессы всё проверяют и думают дать ли мне место в репозитории плагинов, предлагаю интересующимся тоже потестить. Для правильной работы нужен Вордпресс 3.5 или более поздний.

Зип:

**http://artpolikarpov.ru/dialogues/fotorama.zip**

Инструкция к применению
Установите и активируйте плагин как обычно.

На этот раз никакой формы для настройки, включил плагин — фоторамы, выключил — кривые галерейки. И шорткод [gallery] теперь нативно работает, т. е. все эти orderby и ids работают без проблем.

Чтобы настроить конкретную фотораму, добавьте нужные атрибуты в шорткод:

[gallery ids="6,7,8,9,10"
         nav="thumbs"
         allowfullscreen="true"
         thumbheight="48"]

В отличии от обычной фоторамы, тут не нужно писать data- перед названием опции и следует убрать все дефисы, Вордпресс их не понимает. Доступные опции смотрите в документации.

Чтобы настроить все разом, создайте файл fotorama-defaults.js в корне папки с плагинами /wp-content/plugins (не в папке с Фоторамой, чтобы настройка не сбилась при обновлении). И наполните массив jQuery.Fotorama.defaults нужными свойствами (здесь кемелкейсом):

jQuery.Fotorama.defaults = {
  nav: 'thumbs',
  allowFullScreen: true,
  thumbHeight: 48
}

Если вам есть что поправить в моём ПХП — не стесняйтесь.

Андроид, фантастика

Tue, 06 Aug 2013 22:57:46 +0400

Год назад я купил себе Самсунг Галакси-Таб (GT-P7310) для тестов Фоторамы и вообще вёрстки. Внешне и на ощупь плашнет очень приятный, особенно круто получился резиновый задник. Спецификацию читаешь — чем не Айпад. И цена как у Айпада.

Но какой же он тормозной! Я год бьюсь, оптимизирую Фотораму, и всё без толку — в ИЕ 7 на старом ноуте Леново она работает куда плавнее.

Вчера я решил выйти из дефолтного браузера, поставить других и осмотреться. Осмотрелся — тормоза во всём. Отпустило. Поставил три Оперы (Классик, Мобайл и Мини!) и ФФ. Опера ещё больший ад, ФФ чуть пошустрее, но с изредка возникающими ужасными глюками отрисовки блоков со сложными трансформациями.

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

Думаю, может устройство неудачное. С третьего раза поставил эмулятор (СДК — тоже привет) на новый Макбук Про, выделил кучу памяти при настройке, выбрал распоследнюю версию системы. Походил по сайтам, потыкался в скрипты и не нашёл ничего, что бы работало удовлетворительно.

Короче. Мой ребёнок пианино. Есть какие-то сайты (особенно меня интересуют всякие плагины и скрипты галерей), ~~круто~~ хорошо работающие на Андроиде? Поделитесь, накидайте ссылок, пожалуйста. Я хочу перенять опыт. Или это фантастика?

У Фоторамы изменится лицензия

Sat, 26 Jan 2013 01:45:39 +0400

За месяц до Нового года, на волне «если мой твит наберёт 100500 ретвитов, то» я затвитил это:

Игорь упрекнул меня плохим яваскриптом:

Но я намеренно сделал чтобы функция не вовзращала false, чтобы в случае неуспеха оставить себе место для манёвра — undefined. Неуспех пришёл — всего 286 ретвитов.

Короче, всё равно. Фоторама 4 будет бесплатной для всех, или что-то вроде этого.

А теперь скандалы, интриги, расследования: на сегодняшний момент Фоторама собрала собрала 144 665 рублей и 3 143 доллара. Две зарплаты хорошего фронтендера в Москве.

Не такие большие деньги, если размазать на полтора года. И у меня есть ощущение, что эти 33 бакса, которые я просил от коммерческих пользователей, реально мешали Фотораме завоевать мир. Вот и проверим.

P. S.: Для текущей версии ничего не меняется: для каждого домена требуется лицензия, которая запрашивается электронным письмом.

Фоторама 4

Fri, 25 Jan 2013 01:15:51 +0400

Анонс!

Три с небольшим месяца назад я начал переписывать Фотораму с нуля. Было сложно и интересно. Сейчас всё уже почти готово, остались тесты, новая документация и сайт. Третью (текущую) версию думаю временно поселить на old.fotoramajs.com для желающих. Но это ещё когда.

С новой архитектурой Фоторама стала круче и гибче.

Раньше, если забыть указать отдельные превьюшки, Фоторама их генерировала, но так как вся лента навигации строится сразу целиком, приходилось загружать все большие фотографии тоже разом. Это страшно тормозило, я просил людей всё же готовить маленькие превьюшки заранее, и поставил там костыль — все загрузки и отрисовка приостанавливались на время взаимодействия с интерфейсом. Теперь наконец-то ленивая загрузка работает и для превьюшек, грузятся только те, которые видимы, плюс парочка по краям.

Ещё была проблема, когда куча-куча фоток — все они вставали в линию на бесконечную шахту и на больших индексах, при огромных смещениях трансформации в браузерах начинали глючить. Теперь шахта не бесконечная, в ней всего три кадра, а после каждой анимации она возвращается в нулевую позицию. Надо сказать, этот новый движок таскания и швыряния, живущий в файлах touch.js и moveontouch.js, дался мне труднее всего.

Или вот, отдаёшь Фотораме ссылку на Ютуб или Вимео, а она сама находит превьюшки и видео. Видео в айфрейме удивительным образом дружит с жестами и ничего не ломает.

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

Опций, кстати, стало меньше в два раза, все цвета и отступы теперь будут настраиваться только через ЦСС. Оставшиеся опции меняются на лету (можно будет даже конфигуратор сделать потом). Также без переинициализации можно перемешивать, сортировать, удалять и добавлять картинки в галерею:

var api = $('.fotorama').data('api');
api
  .push({img: 'trololo.jpg'})
  .setOptions({loop: true})

Да миллион всего! Честный полный экран, тенюшки, правильный фейд и наплыв, подписи, хеш для ссылки другу, ширина и высота в процентах, подписи, ХТМЛ, минимальная и максимальная ширина и высота, АПИ и события, честная закольцовка первой и последней фотки, подъезжание следующей превьюшки под курсор...

При этом всём Фоторама не потяжелела и стала работать в два раза быстрее. Поверьте и не переключайтесь :-)

Доклад про Фотораму

Sat, 29 Sep 2012 11:34:51 +0400

Рассказал про Фотораму в Омске. Слайды, вдруг кому интересно:

https://dl.dropbox.com/u/29499284/fotorama.pdf

Фоторама 3.0

Tue, 26 Jun 2012 01:46:55 +0400

Три дня назад, 23 июня, Фотораме исполнился год. По этому случаю я круто обновил и Фотораму, и её сайт.

Некоторые новые важные штуки версии 3.0 ниже.

Упрощённое добавление ХТМЛ
Больше не нужно писать хитрые скрипты, чтобы запихнуть в фотораму ХТМЛ, просто пишите:

<div class="fotorama" data-width="500" data-height="333">
<div>1</div> <div>2</div> <div>3</div>
</div>

Можно использовать любые теги, не только дивы.

У Фоторамы нет никаких дефолтных стилей для ХТМЛ, задавайте любые классы и пишите ЦСС самостоятельно. Если фрагмент текста нужен над фоткой, укажите путь к ней через спецатрибуты:

<div class="fotorama" data-width="500" data-height="333">
  <div data-img="1.jpg">1</div>
  <div data-img="2.jpg">2</div>
  <div data-img="3.jpg">3</div>
</div>

Фотку можно поставить и внутрь дива, тогда она не будет обрабатываться фоторамой. Для превьюшек предусмотрен атрибут data-thumb, для штатных подписей — data-caption.

Как легко я сверстал бы галерею на главной Гетвеара, если у меня тогда была Фоторама!

Умное слайд-шоу
Раньше просто отрабатывал таймаут и фотка перелистывалась. Тупо было, если в заданный интервал фотка не успевала загрузиться и один прелоадер сменялся другим. Теперь фоторама ждёт загрузки фотографии, показывает сколько нужно, мотает дальше. Ещё умеет останавливать проигрывание после первого касания пользователя, эту фичу можно отключить через stopAutoplayOnAction:false.

Умная инициализация
Фоторама научилась инициализироваться в скрытых через display:none блоках. Многие хотели поставить фотораму в скрытом блоке, который открывался бы по ссылке. Или несколько фоторам перещёлкивать табами. Сделать это было сложно, так как фоторама ломалась — при инициализации ей нужно определять размеры фоток, а сделать это в скрытом блоке невозможно. Теперь фоторама ждёт того момента, когда окажется видимой и быстренько инициализируется. Если скрыть её на полпути, она тоже это поймёт и приостановит работу. Круть! Такое вообще никакая галерея не умеет.

Минимальные и максимальные размеры
Параметры minWidth, maxWidth, minHeight, maxHeight можно использовать вместе с процентным заданием ширины.

Отключение ЦСС-анимаций
Опция cssTransitions:false переводит фотораму в режим совместимости. Бывает, на сложных страницах, дополнительные анимации и трансформации ломают вёрстку или конфликтуют с другими анимациями. В таком случае можно пожертвовать аппаратным ускорением в Вебките ради общей железобетонности конструкции.

Фейд
Раньше никто не догадывался, что фейд включается через touchStyle:false; теперь всё очевидно — transition:’fade’ (’slide’ по умолчанию). Крутость фоторамного фейда, а точнее наплыва, я уже показывал.

Базовый дизайн
Сначала я думал не трогать дефолтные настройки, но потом слегка подтюнил, не удержался. Всё стало на 2 пикселя изящнее, тёмный фон сменился светлым, добавился приятный ламповый шум под фотками и превьюшками.

Прелоадер
Убил ГИФ. Он был чувствителен к фону и из-за этого у меня даже была опция preloader:’white’ для светлого фона — явный левак. Я нарисовал свою фононезависимую 12-кадровую крутилку в спрайте, которую анимирую скриптом:

Ещё
Опции: thumbsCentered, hideNavIfFullscreen, cropToFitIfFullscreen, fitToWindowHeightOffset. Новые колбеки: onFullscreenOpen, onFullscreenClose, onTransitionStop.

Исправлены баги под Андроидом.

Разобрался со странностями поведения Фоторамы на страницах, где кроме Джейквери был ещё и Мутулз.

Слегка поправлена физика. Тонна улучшений под капотом.

Идите на сайт, берите Фотораму, изучайте примеры кода, читайте новую лицензию, наконец:

http://fotoramajs.com/

Красоту на сайте помогли навести Максим Ткачук и Денис Талала. Максим Ильяхов сделал тексты ещё более мощными и понятными. Кучу готовых рецептов использования Фоторамы заверстал Артём Сапегин. А Коля Митин помог с ПХП и я прикрутил проверку домена на наличие лицензии (если вашего сайта с фоторамой там нет, напишите письмо, пожалуйста). Спасибо вам, друзья!

Объявления

Mon, 19 Mar 2012 23:36:08 +0400

Чтобы несколько раз не вставать, три объявления.

1. К спрайту с флагами добавился SQL-дамп и JSON с кодами и наименованиями стран. Теперь пользоваться спрайтом ещё удобнее. Спасибо Анатолию Бурову!

2. Таня Мисютина приглашает на курс про айфоновские интерфейсы. Осталось 9 мест из 16. Идите, если не хотите, чтобы вашу идею приложения реализовал кто-то другой :-)

3. На сайте Фоторамы каждую неделю новый спонсор фотографий, сейчас вот смотрим карточки Азата Ахъярова.

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

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

http://fotoramajs.com/~oshurkova — Полина Ошуркова,
http://fotoramajs.com/~okonechnikov — Андрей Оконечников,
http://fotoramajs.com/~sapegin — Артём Сапегин,
http://fotoramajs.com/~lebedev — Алексей Лебедев,
http://fotoramajs.com/~akhyarov — Азат Ахъяров.

Фоторама в Вордпрессе

Tue, 14 Feb 2012 14:59:06 +0400

Анна Шишлякова написала плагин, превращающий стандартные вордпрес-галереи в фоторамы.

Зип для установки и маленькое кино на сайте Фоторамы:

http://fotoramajs.com/plug-in/

В следующей версии, через пару месяцев: появится форма со всеми настройками для гиков; исправятся все баги, которые вы найдёте; каждую отдельную фотораму можно будет настраивать через тег [gallery], типа так:

[gallery background="#fff" nav="dots"]

На очереди расширение для Эгеи. Оно уже как бы есть, но чтобы его официально опубликовать, нужно подождать выхода из беты нового форматера E2 — Нисдена.

Фоторама 2.0

Mon, 13 Feb 2012 08:25:54 +0400

Капитально обновил Фотораму:

Всё стало быстрее и лучше.
Появился полноэкранный режим (работающий даже в ИЕ6).
Управление с клавиатуры в полноэкранном режиме.
Не фейд, а наплыв (см. заметку).
Встроенное слайд-шоу (умеет выключаться, если пользователь сам переключил кадр).
Фоторама теперь может принимать размеры активного изображения при каждом переходе.
И запоминать конкретную фотографию в адресе страницы.
Можно задавать ширину в процентах, задавать только одну из сторон, указывать соотношение сторон.
Новое в АПИ: колбек onClick, методы — play, pause, fullscreenopen, fullscreenclose.
Новые иконки загрузки и ошибки (см. пост) в чёрном и белом варианте.
Тысяча улучшений в связях между опциями.
Некоторые опции переименовал, сохранив совместимость со старыми названиями.
Исправлены прошлые баги, напрограммированы будущие :-)

На сайте:

Свежая и полная документация.
Примеры и трюки, скачать, бесплатно, без СМС.
Автоопределение языка и мгновенное его переключение без перезагрузки страницы.
Чудесная 404-я страница с чёрно-белым анимированым логотипом.
Новые фотки на главной. Эту неделю крутится «Догорама» Артёма Сапегина, дальше будут — Андрей Оконечников, Полина Ошуркова, Азат Ахъяров, Юрий Матте, Алексей Лебедев. Когда авторы закончатся, включу рандом. Кстати, присылайте фотки, кто забыл.

Короче, я старался:

http://fotoramajs.com

Тексты @perepisal Максим Ильяхов.

Не переключайтесь — завтра плагин Фоторамы для Вордпресса.