23 заметки с тегом

Фоторама

Позднее Ctrl + ↑

В январском выпуске «Фотомастерской» упомянули Фотораму


А ещё в связи со скорым крутым обновлением Фоторамы, я хочу переделать её сайт, и загрузить его новыми фотками.


ФОТОГРАФЫ!

Не упустите возможность покрутить свои работы на fotoramajs.com. Напишите письмо, я расскажу про формат.

Рядом с вашей фоторамой будет ссылка на ваш сайт. А ещё я дам вам спец. ссылку для твитера, по которой на главной будут открываться только ваши фотки, типа такой:

http://fotoramajs.com/~barataliev

За текущие фотки спасибо Артёму Сапегину, Игорю Скаляриеву, Денису Талала, Алексею Лебедеву, Сергею Королю, Сэму Бараталиеву и Даше. Ребята, если хотите на второй круг, тоже пишите.

Спасибо!

2012   Фоторама

Иконки Фоторамы и ещё

Первый набор иконок Фоторамы я выпилил из Даркбокса, вот загрузка:

А вот ошибка:

Отличные иконки. Cпасибо, Вадим!

Для будущей версии Фоторамы я нарисовал свои иконки статуса, вот такие:

Разве не загляденье! Про радиальный градиент напишу отдельно :-)


А ещё в связи со скорым крутым обновлением Фоторамы, я хочу переделать её сайт, и загрузить его новыми фотками.


ФОТОГРАФЫ!

Не упустите возможность покрутить свои работы на fotoramajs.com. Напишите письмо, я расскажу про формат.

Рядом с вашей фоторамой будет ссылка на ваш сайт. А ещё я дам вам спец. ссылку для твитера, по которой на главной будут открываться только ваши фотки, типа такой:

http://fotoramajs.com/~talala

За текущие фотки спасибо Артёму Сапегину, Игорю Скаляриеву, Денису Талала, Алексею Лебедеву, Сергею Королю, Сэму Бараталиеву и Даше. Ребята, если хотите на второй круг, тоже пишите.

Спасибо!

2012   Фоторама

Новый способ инициализации Фоторамы

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

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

Просто добавляете класс fotorama и блок автоматически превращается в Фотораму:

&lt;div class=&#34;fotorama&#34;><br>
  &lt;img src=&#34;1.jpg&#34;><br>
  &lt;img src=&#34;2.jpg&#34;><br>
  &lt;img src=&#34;3.jpg&#34;><br>
&lt;/div>

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

&lt;div<br>
     class=&#34;fotorama&#34;<br>
     data-backgroundColor=&#34;#797775&#34;<br>
     data-thumbsPreview=&#34;false&#34;<br>
     data-margin=&#34;0&#34;<br>
     data-resize=&#34;true&#34;<br>
><br>
  &lt;img src=&#34;1.jpg&#34;><br>
  &lt;img src=&#34;2.jpg&#34;><br>
  &lt;img src=&#34;3.jpg&#34;><br>
&lt;/div>

А раньше было только так:

&lt;div class=&#34;fotorama&#34;><br>
  &lt;img src=&#34;1.jpg&#34;><br>
  &lt;img src=&#34;2.jpg&#34;><br>
  &lt;img src=&#34;3.jpg&#34;><br>
&lt;/div><br>
&lt;script><br>
$(function(){<br> 
  $('.fotorama').fotorama({<br>
    backgroundColor: '#797775',<br>
    thumbsPreview: false,<br>
    margin: 0,<br>
    resize: true<br>
  });<br>
});<br>
&lt;/script>

Так можно указать все опции, кроме data, html и onShowImg. Прежний способ инициализации и настройки работает без изменений.

2011   скрипты   Фоторама

Наплыв, а не кросфейд

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

Я несколько раз перепроверил код, кроссфейды работали чётко и, по идее, должны были давать неизменяющуюся насыщенность цвета в одинаковых фрагментах двух картинок, или 20% + 80% не равно 100%?
Симметричный кросфейд

Как выясняется на практике, не равно. Артём Горбунов посоветовал так кросфейдить картинки, чтобы сумма их прозрачностей всегда была больше 100%, сказав, что это изобрёл Илья Бирман. Я попробовал удлинить вдвое время исчезновения одной из картинок и это дало хороший результат.
Несимметричный кросфейд

Потом ещё и ещё увеличивал разницу между скоростями фейдина и фейдаута, пока не дошёл до идеальной формулы кросфейда:
Наплыв, а не кросфейд

Вообщем, это уже и не кросфейд получился, а наплыв, или как там его правильно называть. Смотрите пример, демонстрирующий разницу между этими способами переключения картинок:
http://artpolikarpov.ru/html/fade/
Добавлено утром: В комментариях справедливо замочили меня за неправильную работу примеров. Теперь, благодаря замечанию Игоря Барабашина, ЦСС исправлен и всё должно работать, как надо.

А ещё Александр Карпинский написал крутой комментарий:
С одной стороны, мне хочется поворчать, что здравый смысл изобрел Илья Бирман. Это не так, здравый смысл всегда говорил — два непрозрачных объекта один позади другого будут вцелом непрозрачными. Чтобы сделать перетекание, нужно стобы прозрачность менялась у ближнего, а дальний так и оставался непрозрачным.

С другой стороны, хочется поворчать по поводу фразы «или 20% + 80% не равно 100%?». Ну правда, откуда этот плюс? На самом деле там, если 0,8 — непрозрачность ближнего, то общая непрозрачность = 0,8 + 0,2 * (1 — 0,8) = 0, 84.

Ну и еще оговорка: Если картинки сами будут полупрозрачными, то их интенсивность при таком способе будет больше чем нужно.
2011   вёрстка   скрипты   Фоторама

Фоторама 1.5: новые фичи

В прошлый раз я анонсировал здесь Фотораму версии 1.0. С тех пор минуло 2 месяца — исправлены старые баги, напрограммированы новые :-)

Фоторама окончательно повзрослела, и в связи с этим я написал большую статью о ней на Хабре (кстати, это мой дебют там):
http://habrahabr.ru/blogs/webdev/133741/
Кое-что из нового:
  • АПИ для управления галереей через собственные функции,
  • резиновый ресайз,
  • вертикальная ориентация,
  • произвольный ХТМЛ над фотками.
Свежие файлы, документация и примеры на сайте Фоторамы.
2011   скрипты   Фоторама

Три диафильма

Сделал сайт за пару вечеров:
Тридиафильма.ру
Предпосылок было столько же.

Первая. Уже которую ночь подряд наш сын засыпает под диафильмы на стене. Бабушкин проектор пылился на шкафу долгое-долгое время, но пару недель назад что-то разладилось с засыпанием и мы с Женей решили попробовать новый сценарий отхода ко сну: умыться, выпить чего-нибудь тёплого, посмотреть диафильм. И это сработало! Короче, я проникся к диафильмам благодарностью за спокойные вечера.

Вторая — хотелось попробовать Фотораму в деле.
Фоторама

Вот собственно и вся история. Дальше по-быстрому придумал, чем мой сайт будет отличаться от других диафильмовых сайтов, прикрутил вертикальный режим и ресайз Фотораме, с помощью Саши Бабаева и Кости Савельева накромсал и оптимизировал полтора гига диафильмов, написал 100 строк ПХП, сверстал и выложил сайт. Ходите на него сегодня, завтра, послезавтра и вообще :-)

Буду благодарен если вы поделитесь ссылкой с друзьями, а отзывами и предложениями со мной.
2011   диафильмы   семья   Фоторама   я
2011   e2   Фоторама

Я и 404

Пару недель назад на фестивале в Самаре я не удержался от фотографий в жанре «Я и Микки Маус». Смотрите сколько там хороших людей было:

Таня и Танька Я и Миша Танский Денис Кортунов Денис «Кураж-Бамбей» Колесников Таня Мисютина Вадим Макеев Мой бейджик Таня Черкиз и Сергей Сурганов У Кости Горского такие же часы Женя «Болк» Степанищев, Илья Бирман, я, Саша Карпинский

Фоткали на мобилку.

2011   404   e2   Фоторама

Фоторама 1.0

Фоторама 1.0
Фоторама наконец-то домариновалась до версии один-ноль. Она стала умнее и современнее — аппаратное ускорение в Webkit и iOS для суперплавных анимаций, canvas, всяческие оптимизации, постепенная подгрузка фотографий, улучшенная физика и т. д. Появились превьюшки, вернулась перемотка по клику, добавилась куча опций для тонкой настройки по вкусу, галерея ещё лучше заработала в браузерах-динозаврах и т. п.

Всё посмотреть и скачать свежие файлы можно на новом сайте Фоторамы:

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

Кстати, не все фотографы ответили на моё письмо, наверное спам-фильтры виноваты. Поэтому, если вы хотите, чтобы ваша галерея тоже оказалась на сайте Фоторамы, присылайте 10-20 фотографий в зип-архиве сразу на мою почту, фотки нужно ужать до 700 пикселей по большей стороне.

Спасибо! А теперь прошу вас твитить, лайкать и гуглплюсить fotoramajs.com :-)
2011   Фоторама

Фоторама 1.0 грядёт

Очень скоро выйдет улучшенная, исправленная и дополненная версия Фоторамы — один-ноль. У плагина появится отдельный сайт.

В связи с этим я начинаю поиск фоток для демок. Фотографы, покажите свои работы! Условия такие:
  • одна галерея — один автор,
  • ссылка на ваш сайт под вашей галереей в качестве единственной благодарности,
  • на фотках не должно быть водяных и прочих авторских знаков (во всех современных браузерах фотки будут отрисовываться через canvas — тупо скачать их не получится).
Кидайте ссылки куда угодно — в комментарии, на почту (см. подвал), в твитер (см. шапку).
2011   объявление   Фоторама
Ранее Ctrl + ↓