1 Тема от boo

  • boo
  • Пользователь
  • Не на сайте

Тема: [релиз] Плагин галереи — Фоторама

Всем привет! У меня хорошие новости!
Сегодня день выпуска долгожданного плагина галерей для S2. Кстати, он совершенно бесплатный, пользуйтесь!

Фоторама — это превосходная галерея, которая умеет огромное количество всего, постоянно развивается.
Её разрабатывает и улучшает Артём Поликарпов.

Фоторама бесплатна, распространяется под лицензией MIT.
Её можно использовать в коммерческих проектах без опаски.

Принцип работы

После установки плагина fotorama_button (zip, 3 Kb) в редакторе появляются кнопки, которые делают всё, что надо.
Не забывайте переименовать папку с плагином в fotorama_button! Иначе работать не будет.

Вставляете картинки, выделяете их, нажимаете кнопку — всё, галерея создана.

В шаблон автоматически подключаются JQuery и необходимые файлы Фоторамы, которые расположены на CDN-хостах. Это обеспечивает быстрый доступ к подключаемым библиотекам из любой точки мира.

http://phota.me/dgtW.png

При большом желании Фотораму можно скачать и залить к себе на хост.
В этом случае придется немного подправить плагин.

Вставка картинок, галерея

1. Основа, просто галерея с листалкой.
По умолчанию включена опция «развернуть на весь экран» (data-allowfullscreen="true") и поддержка тач-устройств.
Можно добавить описание к картинке (data-caption="Описание") и тогда оно будет показываться поверх картинки.

<div class="fotorama"
     data-arrows="true"
     data-click="true"
     data-swipe="true"
     data-allowfullscreen="true">
  <img src="1.jpg" data-caption="One">
  <img src="2.jpg" data-caption="Two">
</div>

2. Галерея с превьюшками. Хороша с большими картинками, которые можно развернуть на весь экран.

<div class="fotorama"
     ...
     data-nav="thumbs">
...
</div>

Если указан размер для первой картинке в галерее, то Фоторама покажет все остальные картинки в этом же размере.

Вставка видео

Иконка не пригодилась, возникли сложности в реализации.
При этом никто не мешает вставлять нужное руками. Фоторама работает. 

<div class="fotorama">
  <a href="http://youtube.com/watch?v=C3lWwBslWqg">Desert Rose</a>
  <a href="http://vimeo.com/61527416">Celestial Dynamics</a>
</div>

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

Пользуйтесь и обязательно поблагодарите Артёма — он клёвый!

20.06.2015 05:44:46. Текст был изменен (boo).

2 Ответ от Роман

Re: [релиз] Плагин галереи — Фоторама

А в чем сложности с видео?

3 Ответ от boo

  • boo
  • Пользователь
  • Не на сайте

Re: [релиз] Плагин галереи — Фоторама

Сложностей с видео, собственно, нет. Добавить пару тэгов руками оказалось быстрее, чем писать код, который может вычислять длинну строки со ссылкой, да ещё и в цикле. Это что касается vimeo и youtube.

А как быть с подобными вещами — совершенно непонятно:

<div class="fotorama">
  <a href="http://dailymotion.com/embed/video/xxgmlg?autoplay=1"
     data-video="true">
      <img src="xxgmlg_preview.jpg">
  </a>
  <a href="http://dailymotion.com/embed/video/xu4jqv?autoplay=1"
     data-video="true">
      <img src="xu4jqv_preview.jpg">
  </a>
</div>

А ведь ещё есть возможность ставить свои превьюшки для видео, например.

4 Ответ от boo

  • boo
  • Пользователь
  • Не на сайте

Re: [релиз] Плагин галереи — Фоторама

У плагина фоторамы теперь есть github-страничка.
Все обновления теперь там.

29.04.2014 11:47:39. Текст был изменен (boo).

  • Николай
  • Новый пользователь
  • Не на сайте

Re: [релиз] Плагин галереи — Фоторама

Boo, лайк тебе и Артему!
Пойду опробую :)

6 Ответ от Ed

  • Ed
  • Новый пользователь
  • Не на сайте

Re: [релиз] Плагин галереи — Фоторама

А этот плагин будет работать с wysiwyg редактором?

7 Ответ от boo

  • boo
  • Пользователь
  • Не на сайте

Re: [релиз] Плагин галереи — Фоторама

Ed пишет:

А этот плагин будет работать с wysiwyg редактором?

Не проверял. Плагин встраивается в редактор по умолчанию.

14.05.2014 20:17:57. Текст был изменен (boo).

8 Ответ от Foton

  • Foton
  • Новый пользователь
  • Не на сайте

Re: [релиз] Плагин галереи — Фоторама

Не удалось загрузить расширение «s2-ftrm».

Идентификатор расширения должен совпадать с названием папки расширения и состоять только из строчных английских букв или цифр (a-z, 0-9) или символа подчеркивания (_).

Что бы это значило?

9 Ответ от Роман

Re: [релиз] Плагин галереи — Фоторама

Расширение должно быть не в папке "s2-ftrm", а в папке "fotorama_button". Переименуйте.

10 Ответ от boo

  • boo
  • Пользователь
  • Не на сайте

Re: [релиз] Плагин галереи — Фоторама

Обновил плагин до актуальной версии Фоторамы (4.6.4), сменились ссылки на cdn.

13.06.2015 08:12:59. Текст был изменен (boo).