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

В этой статье рассмотрен jQuery плагин Fotorama, его установка и использование.

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

Сегодня мы с вами рассмотрим очень красивый и функциональный, но в тоже время простой jQuery плагин Fotorama. Fotorama позиционирует себя как плагин для фото галерей на сайтах.

Установка

В самом простом случае установка состоит из 3х шагов:

Подключаем jQuery версии 1.8 или выше:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Подключаем плагин Fotorama и его стили:

<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.2/fotorama.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.2/fotorama.js"></script> 

Создаем блок класса fotorama и добавляем по порядку в него изображения:

<div class="fotorama">
  <img src="http://s.fotorama.io/1.jpg">
  <img src="http://s.fotorama.io/2.jpg">
</div>

После этих действий мы можем посмотреть работу плагина:

Пример работы плагина Fotorama

Если вы не хотите использовать CDN, то вы можете скачать последнюю версию плагина fotorama.

Тонкая настройка

Помимо автоматической инициализации, мы можем использовать ручную инициализацию. Если класс вашего блока называется fotorama, то вам сначала нужно отключить автоматическую инициализацию добавив атрибут data-auto="false":

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

И теперь мы можем вручную инициализировать скрипт:

$(function () {
  $('.fotorama').fotorama();
});

Так же мы можем передавать массив с картинками напрямую в функцию инициализации:

$('.fotorama').fotorama({
  data: [
    {img: '1.jpg', thumb: '1-thumb.jpg'},
    {img: '2.jpg', thumb: '2-thumb.jpg'}
  ]
});

Размеры

Fotorama изменяет размеры блока до размеров первого изображения. Все остальные изображения маштабируются под этот блок. Мы можем вручную задать размеры блока используя атрибуты data-width и data-height:

<div class="fotorama" data-width="800" data-height="600">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

Мы так же можем изменять размеры блока в зависимости от размера экрана используя атрибут data-ratio и задав data-width в процентах:

<div class="fotorama" data-width="100%" data-ratio="800/600">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

Так же мы можем использовать data-min-* и data-max-* атрибуты для задания минимального и максимального размера блока. Например:

<div class="fotorama" data-width="100%" data-ratio="800/600" data-minwidth="400" data-maxwidth="1000" data-minheight="300" data-maxheight="100%">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

Превьюхи

По умолчанию показ предварительных изображений отключен. Вместо них отображаются точки в IPhone стиле. Чтобы включить отображение превьюх нужно добавить атрибут data-nav="thumbs":

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

Пример работы плагина Fotorama с предварительным просмотром

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

<div class="fotorama" data-nav="thumbs">
  <a href="1.jpg"><img src="1_thumb.jpg"></a>
  <a href="2.jpg"><img src="2_thumb.jpg"></a>
</div>

Здесь ссылка ведет на основную картинку, которая будет отображаться в большом окне, а в картинки происходит загрузка превьюх. По умолчанию размер превьюх равен 64x64 пикселя, вы можете это изменить задав атрибуты width и height:

<div class="fotorama" data-nav="thumbs">
  <a href="1.jpg"><img src="1_thumb.jpg" width="144" height="96"></a>
  <a href="2.jpg"><img src="2_thumb.jpg" width="64" height="128"></a>
</div>

На весь экран

В нашей галерее появится возможность развернуть окно просмотра на весь экран, если задать атрибут data-allowfullscreen="true":

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

Пример работы плагина Fotorama с полноэкранным просмотром

HTML код вместо картинок

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

<div class="fotorama">
  <div>One</div>
  <div><strong>Two</strong></div>
  <div><em>Three</em></div>
</div>

Пример работы плагина Fotorama с html фреймами

Текст в фреймах можно сделать выбираемым, если добавить к тексту класс fotorama__select:

<div class="fotorama">
  <div><span class="fotorama__select">One</span></div>
  <div><strong class="fotorama__select">Two</strong></div>
  <div><em class="fotorama__select">Three</em></div>
</div>

Вы можете добавить атрибут data-img к каждому фрейму с адресом картинки, и она будет отображаться в фоне:

<div class="fotorama">
  <div data-img="1.jpg">One</div>
  <div data-img="2.jpg"><strong>Two</strong></div>
  <div data-img="3.jpg"><em>Three</em></div>
</div>

Пример работы плагина Fotorama с html фреймами и картинкой на фоне

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