Использование плагина Fotorama: Часть вторая

В этой статье мы продолжим рассматривать оставшийся богатый функционал плагина Fotorama.

Автор . Дата: 10.11.2014

Статьи по теме:

Использование плагина Fotorama: Часть первая

Отображение картинок

Есть 4 возможных варианта отображения не пропорциональных картинок в фрейме:

  • contain (по умолчанию): изображение будет полностью отображено в фрейме сохранив пропорции.
  • cover: изображение будет кадрировано, чтобы полностью закрыть фрейм.
  • scaledown: будет произведено уменьшение размера, если размер изображения больше размера фрейма.
  • none: изображение будет отображено в натуральных размерах.

Эти режимы задаются с помощью атрибута data-fit:

<div class="fotorama" data-fit="cover">
  <img src="1.jpg">
  <img src="2.jpg" data-fit="contain">
</div>

Режимы переключения

В Fotorama есть 2 режима переключения картинок: slide и crossfade. В режиме slide картинки будут перелистываться, в режиме crossfade прозрачность одной картинки увеличивается, другой уменьшается, пока одна не станет полностью видимой а другая невидимой.

<div class="fotorama" data-transition="crossfade">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

Ещё есть режим dissolve. Он похож на режим crossfade, за исключением того, что не происходит вспышки при анимации, и этот режим хорошо подходит для создания эффекта gif анимации.

Вы так же можете задать отдельные режимы для свайпа картинок и клика по картинкам. Чтобы задать отдельный режим для клика по картинкам, вам нужно добавить атрибут data-clicktransition:

<div class="fotorama" data-transition="slide" data-clicktransition="crossfade">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

Подписи

Вы можете подписать отдельно каждую картинку. Для этого вам нужно добавить атрибут data-caption к картинкам, к которым нужны подписи:

<div class="fotorama">
  <img src="1.jpg" data-caption="One">
  <img src="2.jpg" data-caption="Two">
</div>

Ссылка на картинку из слайдера

Вы можете добавить возможность открывать ссылку сразу на какую-то картинку в слайдере. Вы можете использовать эту возможность для того, чтобы отправить ссылку своим друзьям, и они, перейдя по ней, увидят сразу ту картинку, хеш которой содержится в URL. Для этого вам нужно добавить атрибут data-hash="true" к блоку и атрибуты id в картинкам, на которые вы хотите переходить по ссылкам:

<div class="fotorama" data-hash="true">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg" id="three">
</div>

Цикличный показ

Для зацикливания показа картинок в слайдере по кругу вам нужно добавить атрибут data-loop="true":

<div class="fotorama" data-loop="true">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

Автоматическое перелистывание

Вы можете настроить слайдер на автоматическую смену картинок по таймеру. Для этого вам нужно указать атрибут data-autoplay="true":

<div class="fotorama" data-autoplay="true">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

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

data-autoplay="3000"

Остановить автоматическое воспроизведение можно при прикосновении к картинке. Отключить это поведение можно с помощью атрибута data-stopautoplayontouch="false".

Случайная картинка

Вы можете добавить ссылку, при нажатии на которую в слайдере будет происходить переключение на случайную картинку. Сделать это можно с помощью атрибута data-shuffle="true":

<div class="fotorama" data-shuffle="true">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

Управление с клавиатуры

Вы можете включить возможность переключения фреймов с помощью клавиш стрелок вправо и влево на вашей клавиатуре. Для этого вам нужно добавить атрибут data-keyboard="true":

<div class="fotorama" data-keyboard="true">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

Вы так же можете включить и другие кнопки, например пробел, Home, End, стрелка вверх, стрелка вниз:

<div class="fotorama" data-keyboard='{"space": true, "home": true, "end": true, "up": true, "down": true}'>
  <img src="1.jpg">
  <img src="2.jpg">
</div>

Методы переключения

Вы можете включать и выключать различные методы переключения фреймов, такие как клик по фрейму, свайп, переключение стрелками или с помощью трекпада:

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

Расположение навигации

Вы можете перенести превьюхи или точки вверх фрейма. Для этого вам нужно указать атрибут data-navposition="top":

<div class="fotorama" data-navposition="top">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

Чтобы отключить отображение навигации вам необходимо добавить атрибут data-nav="false".

Право на лево

Этот функционал больше актуален для арабских сайтов, где чтение происходит справа на лево, но все же мы и его рассмотрим. При включении этой функции, слайдер, в автоматическом режиме будет крутиться не в правую сторону, а наоборот. Для того, чтобы включить эту функцию вам нужно указать атрибут data-direction="rtl":

<div class="fotorama" data-direction="rtl">
  <img src="1.jpg" data-caption="1. الرجل في سيارة">
  <img src="2.jpg" data-caption="2. جوقة">
</div>

Видео

Вы можете вставить в слайдер не только картинки и html разметку, но даже и видео. На данный момент поддерживается youtube и vimeo. Фреймы указываются как обычные ссылки на видео:

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

Вы можете указать свою превьюху для видео. Для этого вам нужно внутрь ссылки положить картинку:

<div class="fotorama">
  <a href="http://youtube.com/watch?v=C3lWwBslWqg"><img src="desert-rose.jpg"></a>
</div>

 


comments powered by HyperComments