API

<script>
 $(function () {
 // 1. Инициализировать fotorama вручную.
 var $fotoramaDiv = $('#fotorama').fotorama();

 // 2. Получить объект API.
 var fotorama = $fotoramaDiv.data('fotorama');

 // 3. Осмотрим его в консоли.
 console.log(fotorama);
 });
</script>

<div id="fotorama"
 class="fotorama"
 data-auto="false">
<!-- ↑ Important attribute. -->
 <img src="1.jpg">
 <img src="2.jpg">
</div>

Переменные

fotorama.index число

Нулевое положение фотографии в пределах всех Фоторам на странице.

fotorama.size число

Количество кадров в Фотораме.

fotorama.data массив

fotorama.options объект

fotorama.activeIndex число

Нулевое положение активного кадра.

fotorama.activeFrame объект

Объект данных кадра со следующими ключевыми свойствами:

  • img строка
    URL изображения.
  • thumb строка
    URL уменьшенного изображения.
  • full строка
    URL изображения в полноэкранном режиме.
  • id строка
    Данный идентификатор.
  • $stageFrame jQuery
    Элемент DOM активного кадра каскада. Завернуто в jQuery.
  • $navDotFrame jQuery
    Элемент DOM активного навигационного фрейма с точкой в ​​стиле iPhone. Завернуто в jQuery.
  • $navThumbFrame jQuery
    Элемент DOM активного навигационного фрейма с миниатюрой. Завернуто в jQuery.

Методы

fotorama.show(index)

Показывает кадр с заданным index, нулевым числом:


// Переходим к первому кадру:
fotorama.show(0);

// Четвертый:
fotorama.show(3);

... или ключ-строка:


// следующий:
fotorama.show('>');

// предыдущий:
fotorama.show('<');

// последний:
fotorama.show('>>');

// id атрибута:
fotorama.show('some-id');

fotorama.show (options)

Показывает кадр с заданным index и в заданное время (time):


fotorama.show({
 index: 1, // The second frame.
 time: 500 // Half-second transition.
});

fotorama.startAutoplay ([интервал])

Запуск слайд-шоу с заданным interval в миллисекундах. По умолчанию interval составляет 5000, 5 секунд.

fotorama.stopAutoplay()

Остановить слайдшоу..

fotorama.requestFullScreen()

Открывает fotorama в полноэкранном режиме, если разрешено в настройках.

fotorama.cancelFullScreen()

Выход из полноэкранного режима.

fotorama.playVideo()

Запускает видео, если оно есть у активного фрейма.

fotorama.stopVideo()

Остановка и выгрузка воспроизводимого видео.

fotorama.resize(options)

Изменяет размер fotorama, options - объект с width, minwidth, maxwidth, height, minheight, maxheight и ratio, которое вы можете передать, чтобы заставить определенный размер:


fotorama.resize({
 width: 500,
 height: 333
});

Анимируйте изменения, передав продолжительность в миллисекундах в качестве второго аргумента:


fotorama.resize({
 width: 333,
 height: 500
}, 1000);

fotorama.setOptions(options)

Манипулирует настройками fotorama во время выполнения:


fotorama.setOptions({
 nav: false,
 arrows: false
});

fotorama.load(data)

Загружает новые данные (data) в fotorama. Он должен быть структурирован как массив и следовать тем же шаблонам, что и исходные данные:


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

fotorama.push(frame1, ..., frameN)

Добавляет данные фреймы к fotorama:


fotorama.push({img: '3.jpg', thumb: '3-thumb.jpg'});

fotorama.pop()

Удаляет последний кадр.

fotorama.shift()

Удаляет первый кадр.

fotorama.unshift(фрейм1, ..., фреймN)

Добавляет один или несколько кадров к началу фотогалереи.

fotorama.splice(index , howMany[,-фрейм1,-...,-фреймN]])

Изменяет массив данных, добавляя новые кадры при удалении старых кадров. Он работает так же, как Array.splice:


// Удаляем два кадра после первого:
fotorama.splice(0, 2);

// Замена последнего кадра:
fotorama.splice(-1, 1, {img: 'new-last.jpg'});

fotorama.reverse()

Делает задний ход fotorama в контейнере.

fotorama.sort([compareFunction])

Сортирует кадры как Array.sort:

items.sort(function (frameA, frameB) {
 if (frameA.img > frameA.img) return 1;
 if (frameB.img < frameB.img) return -1;
 return 0;
});

fotorama.shuffle()

Перемешать кадры.

fotorama.destroy()

Убивает fotorama и восстанавливает исходное содержимое.

События

Прикрепите обратные вызовы к событиям Fotorama. Каждый обратный вызов содержит объект события и ссылку на API в качестве аргументов функции:


$('.fotorama').on('fotorama:ready', function (e, fotorama) {
 console.log(e.type, fotorama.activeIndex);
});

Некоторые из обработчиков содержат третий аргумент extra с дополнительными данными:


$('.fotorama').on(
 'fotorama:show fotorama:showend',
 function (e, fotorama, extra) {
 console.log(e.type + (extra.user ? ' after user’s touch' : ''));
 console.log('transition duration: ' + extra.time);
 }
);



$('.fotorama').on('fotorama:load', function (e, fotorama, extra) {
 console.log(extra.src + ' is loaded');
});

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

<script>
 $(function () {
 $('.fotorama')
 // Listen to the events
 .on('fotorama:ready ' + // Fotorama полностью готова
 'fotorama:show ' + // Начало перехода к новому кадру
 'fotorama:showend ' + // Конец переходного периода
 'fotorama:load ' + // Загружено изображение с кадром для некоторого кадра
 'fotorama:error ' + // Изображение сцены какого-то кадра разбито
 'fotorama:startautoplay ' + // Запускается показ слайдов
 'fotorama:stopautoplay ' + // Слайд-шоу остановлено
 'fotorama:fullscreenenter ' + // Вход в полноэкранный режим Fotorama 
 'fotorama:fullscreenexit ' + // Выход из полноэкранного режима Fotorama
 'fotorama:loadvideo ' + // Загружено видео в iframe
 'fotorama:unloadvideo', // Удалено видео из iframe
 function (e, fotorama, extra) {
 console.log('## ' + e.type);
 console.log('active frame', fotorama.activeFrame);
 console.log('additional data', extra);
 }
 )
 // Initialize fotorama manually
 .fotorama();
 });
</script>

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