11 заметок с тегом

скрипты

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

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

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

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

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

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

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


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

2013   деньги   скрипты   Фоторама

Фоторама 4

Анонс!

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

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

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

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

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

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

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

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

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

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

2013   дизайн   скрипты   Фоторама

Гармошка

Соорудил гармошку на ЦСС и джаваскрипте.

Кроссбраузерностью не заморачивался, должно играть в современных браузерах.

Особых чудес в коде нет, но мне нравится, как умно считается градус сгиба мехов, и что аудио включается мягко, без пуков. Посмотрите сами, как там всё устроено.

Если есть идеи по развитию игрушки, добро пожаловать в репозиторий на Гитхабе. Жду пулреквестов.

Двигайте меха!

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   скрипты   Фоторама

Нормализация флеша

Я тут ещё немного подтюнил Эгею, чтобы блог был в одной шкуре с остальным сайтом. Вёрстка теперь одноколоночная, сайдбар переехал в хедер и спрятался за «дыдыдышки» — теги, избранное, обсуждаемое. Слайдер важности тегов есть на каждой странице.

Во время тестирования новых поповеров обнаружилось, что флеш перекрывает их:
Нормализация флеша

Этой фиче уже 100500+ лет, и все знают, как от неё избавиться — нужно добавить ролику атрибут wmode со значением opaque. Чтобы не править коды видео в написанных и будущих заметках руками, я написал нехитрый скриптик, который всё делает автоматом:
http://dl.dropbox.com/u/29499284/wmode-opaque.js
Скрипт переваривает и старые коды подключения, и новый ютобовский код, работающий через iframe. Забирайте скрипт к себе, проверяйте, как он ведёт себя с другими плеерами, пячьте код, шлите отзывы, пожалуйста.

Кстати, теперь решилась проблема не только с моими поповерами, но и с формой логина в блог. Эвона как было:
Нормализация флеша
2011   e2   вёрстка   скрипты   этот сайт

Новая Фоторама

Обновил Фотораму.

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

С чем не поспоришь, так это с тем, как я сделал айфонные пипки под фотками, таких точечек пруд пруди в интернете, но у всех у них одна беда — между точками курсор «проваливается» в микропустоту, которую не кликнешь, а когда водишь по всей полосе, курсор бешено мигает. Ну я уже писал про это.

В следующей, 0.5-й версии, ожидается возвращение фейда и перемотки по клику (будет доступно как опция). Берите и пользуйтесь на здоровье.

Чуть не забыл! Фоторама научилась быть диворамой, можно (на свой страх и риск!) положить в неё любые дивы вместо картинок. Буду благодарен, если вы поделитесь идеями о развитии плагина, пришлёте багрепорт, поможете справится, с чем у меня не получается.
2011   вёрстка   скрипты   Фоторама

Слоган Мотор.ру

Первая версия слогана для Мотора была такой:
Мотор — истории об автомобилях и людях

Верстать слоган нужно было текстом, но чтобы он точно умещался между крайними штрихами „m“ и „r“. Подбор межбуквенного растояния (letter-spacing) не дал никакого результата — в разных браузерах всё выглядело по разному, при масштабировании шрифтов дико разъезжалось, а убери пару букв — значение нужно опять подбирать экспериментально.

Спасение, как это часто бывает, нашлось в таблице. Код получился страшный, но работающий:
<table><tr><td>И</td><td class="r">&nbsp;</td><td>с</td><td class="r">&nbsp;</td><td>т</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>р</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>о</td><td class="r">&nbsp;</td><td>б</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>а</td><td class="r">&nbsp;</td><td>в</td><td class="r">&nbsp;</td><td>т</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>м</td><td class="r">&nbsp;</td><td>о</td><td class="r">&nbsp;</td><td>б</td><td class="r">&nbsp;</td><td>и</td><td class="r">&nbsp;</td><td>л</td><td class="r">&nbsp;</td><td>я</td><td class="r">&nbsp;</td><td>х</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>и</td><td class="r">&nbsp;</td><td> </td><td class="r">&nbsp;</td> <td>л</td><td class="r">&nbsp;</td><td>ю</td><td class="r">&nbsp;</td><td>д</td><td class="r">&nbsp;</td><td>я</td><td class="r">&nbsp;</td><td>х</td></tr></table>
У ячейки с буквой ширина 1px, с пробелом — auto. Магия в том, что ячейка таблицы не умеет быть меньше своего содержимого, и в данном случае принимает ширину своей буквы, а пустые ячейки автоматически и равномерно заполняют оставшееся от букв место.

Потом слоган поменяли на короткий «всё что движется». Таблица уже была не нужна, зачем тянуть 3 буквы на 300 пикселей. Но убивать своё изобретение мне не хотелось, и чтобы оправдать его жизнь я придумал прикольную анимацию слогана. Правда на боевой сервер она не попала (главный редактор не поверил арт-директору, что она — годная), и сейчас там моя табличка просто для того, чтобы вводить в ступор любопытствующих технологов.
2011   вёрстка   Мотор   скрипты

Фоторама 0.2

Наслушавшись комментариев и критики выкатываю 0,2-ю версию Фоторамы. Она:
  • разучилась делать слайд-шоу; действительно, зачем оно надо;
  • сменила переключалки; теперь они не скрываются, и по-другому расположены;
  • кое-какие опции нажила;
  • поселилась на Гитхабе, пока не знаю, есть ли в этом польза.
Качайте и пользуйтесь, пожалуйста :-) Буду рад также, если кто-то захочет поучаствовать в этом нехитром проектике и научит меня пользоваться Гитхабом.
2011   вёрстка   скрипты   Фоторама
Ранее Ctrl + ↓