Fotorama options

Fotorama’s default settings are good, so there’s no need to mess with them. Still, you can fine-tune it with 40 options and API.

Фоторама изначально хорошо настроена и не требует вмешательства. Но при желании она настраивается с помощью 40 опций и АПИ.

#Three ways to define options

#Три способа указания опций

When fotorama is automatically initialized by the “fotorama” class, options are passed through the data-optionName attributes:

Когда фоторама инициализируется автоматически, по классу fotorama, опции передаются через атрибуты data-optionName:
<div class="fotorama" data-nav="dots" data-margin="0"> <img src="1.jpg"><img src="2.jpg"><img src="3.jpg"> </div>
Regular way of initialization and customization for jQuery plugins, $(el).fotorama({optionName1: foo, optionName2: bar}):

Привычный для Джейквери способ инициализации и настройки, $(el).fotorama({optionName1: foo, optionName2: bar}):
<div id="my-fotorama"> <img src="1.jpg"><img src="2.jpg"><img src="3.jpg"> </div> <script> $(function() { $('#my-fotorama').fotorama({nav: 'dots', margin: 0}); }); </script>
Overriding the default values in the fotoramaDefaults array:

Переопределение исходных значений в массиве fotoramaDefaults:
<script> fotoramaDefaults = { nav: 'dots', margin: 0 } </script>

#List of options

#Cписок опций

#`width` type: `number` || `string`, default: `'auto'`

Ширина контейнера с изображениями в пикселях (width: 700) или в процентах (width: '100%').

Image container width in pixels (width: 700) or percents (width: '100%').

#`height` type: `number` || `string`, default: `'auto'`

Высота контейнера с изображениями в пикселях.

Image container height in pixels.

#`aspectRatio` type: `number` || `string`, default: `'auto'`

Соотношение сторон. Вычисляется делением ширины на высоту, например, у картинки 700×467 соотношение сторон равно 1.4989293362. Рекомендуется указывать aspectRatio, если ширина задана в процентах.

Width divided by height. For example — 700×467 image has 1.4989293362 aspect ratio.

#`touchStyle` type: `boolean`, default: `true`

Возможность перетаскивать и смахивать изображения мышкой на компьютере или пальцем на мобильных устройствах.

Enabling image drag and flick with mouse or fingers on mobile devices.

#`click` type: `boolean`, default: `true`

Переход между изображениями по клику.

Moving between images by clicking.

#`loop` type: `boolean`, default: `false`

Разрешает сквозной переход между крайними кадрами по клику на изображении или стрелках.
Пример

Loops the last and the first frame for seamless transition on image or arrow click.
Example

#`transitionDuration` type: `number`, default: `333`

Длительность анимаций в миллисекундах.

Animation length in milliseconds.

#`background` type: `string`, default: `null`

Фон контейнера с изображениями. Переопределяет значение из ЦСС.

Image container background. Overrides the CSS value.

#`margin` type: `number`, default: `5`

Размер горизонтальных отступов между изображениями.

Horizontal margins for images.

#`minPadding` type: `number`, default: `10`

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

Minimum size of image container padding when the aspect ratio of container's sides and one of the active image do not match.

#`alwaysPadding` type: `boolean`, default: `false`

Добавляет внутренние поля контейнеру с изображениями при любом соотношении сторон.

Adds padding to the image container with any aspect ratio.

#`zoomToFit` type: `boolean`, default: `true`

Растягивает изображения, если они меньше контейнера.

Stretching the images if they are smaller than the container.

#`cropToFit` type: `boolean`, default: `false`

Растягивает и обрезает изображения, чтобы они занимали всю площадь контейнера.

Stretching and cropping the images to fill all the container’s area.

#`nav` type: `string` || `boolean`, default: `'thumbs'`

Стиль навигации. Превьюшки —'thumbs', точки в стиле айфона —'dots', ничего —'none'.

Navigation style. Prevews — 'thumbs', iPhone-style dots—'dots', nothing — 'none'.

#`navPosition` type: `string`, default: `'auto'`

Расположение блока навигации относительно изображений. В горизонтальном режиме возможны 'bottom' или 'top', в вертикальном — 'left' или 'right'.
Пример

Navigation block position relative to images. In horizontal mode 'bottom' or 'top' are available; in vertical—'left' or 'right'.
Example

#`navBackground` type: `string`, default: `null`

Фон контейнера с превьюшками или точками. Переопределяет значение из ЦСС.

Background of the container with previews or dots. Overrides the CSS values.

#`dotColor` type: `string`, default: `null`

Цвет точек. Переопределяет значение из ЦСС.

Dot color. Overrides the CSS values.

#`thumbSize` type: `number`, default: horizontal mode — `48`, vertical — `64`

#`thumbSize` type: `number`, default: горизонтальный режим — `48`, вертикальный — `64`

Высота превьюшек в горизонтальном режиме Фоторамы, ширина — в вертикальном.

Tumbnail height in horizontal mode; width — in vertical.

#`thumbMargin` type: `number`, default: `5`

Размер внешних полей превьюшек.

Size of thumbnail margins.

#`thumbBorderWidth` type: `number`, default: `3`

Толщина рамки активной превьюшки.

Border width of the active thumbnail.

#`thumbBorderColor` type: `string`, default: `null`

Цвет рамки активной превьюшки. Переопределяет значение из ЦСС.

Border color of the active thumbnail. Overrides the CSS value.

#`arrows` type: `boolean`, default: `true`

Включает навигационные стрелки над фотографиями.

Turns on navigation arrows over the photos.

#`arrowsColor` type: `string`, default: `null`

Цвет стрелок. Переопределяет значение из ЦСС.

Arrow color. Overrides the CSS value.

#`arrowPrev` type: `string`, default: horizontal mode — `◄`, vertical — `▲`

#`arrowPrev` type: `string`, default: горизонтальный режим — `◄`, вертикальный — `▲`

Cимвол или ХТМЛ для стрелки «назад».

Symbol or HTML for the “back” arrow.

#`arrowNext` type: `string`, default: horizontal mode — `►`, vertical — `▼`

#`arrowNext` type: `string`, default: горизонтальный режим — `►`, вертикальный — `▼`

Cимвол или ХТМЛ для стрелки «вперёд».

Symbol or HTML for the “forward” arrow.

#`caption` type: `string` || `boolean`, default: `'none'`

Отображение подписей (задаются через атрибут alt). Под фоторамой — 'simple', над изображениями — 'overlay', без подписей — 'none'.

Display captions (set in the alt attribute). Under the fotorama — 'simple', over the images — 'overlay', no captions — 'none'.

#`flexible` type: `boolean`, default: `false`

Если flexible: true, фоторама принимает размеры активного изображения при каждом переходе.
Пример

If flexible: true, the fotorama fits the size of active image on every transition.
Example

#`fitToWindowHeight` type: `boolean`, default: `false`

Уменьшает высоту фоторамы, если она больше высоты окна браузера.

Decreases the fotorama height, if it is taller than the browser window.

#`fullscreen` type: `boolean`, default: `false`

Полноэкранный режим фоторамы при инициализации.

Makes the fotorama go fullscreen on initialization.

#`fullscreenIcon` type: `boolean`, default: `false`

Показывает иконку входа в полноэкранный режим.

Show icon that toggles the fullscreen mode.

#`autoplay` type: `boolean` || `number`, default: `false`

Воспроизведение слайд-шоу. По умолчанию пауза между изображениями 5 секунд. Задайте любой интервал в миллисекундах, например, 7 секунд: autoplay: 7000.
Пример

Enable slideshow. By default, a pause between images is 5 seconds. Set any interval in milliseconds, for example — 7 seconds: autoplay: 7000.
Example

#`stopAutoplayOnAction` type: `boolean`, default: `true`

Останавливает слайд-шоу после взаимодействия пользователя с фоторамой.

Stops slideshow at any user action with fotorama.

#`vertical` type: `boolean`, default: `false`

Вертикальная ориентация фоторамы.

Vertical orientation of the fotorama.

#`preload` type: `number`, default: `3`

Количество предзагружаемых изображений с каждого края активного кадра.

Number of preloaded images from each active frame’s edge.

#`preloader` type: `string`, default: `'dark'`

Цвет прелоадера и иконки «ошибка», 'dark' или 'white'.

Color of the preloader and the “error” icon, 'dark' or 'white'.

#`shadows` type: `boolean`, default: `true`

Включает тени в интерфейсе.

Enables shadows in the user interface.

#`data` type: `array`, default: `null`

Альтернативный способ указания изображений и подписей. Каждый кадр представляется в виде ассоциативного массива:

Alternative way of specifying images and captions. Each frame is presented as an associative array.

$('#my-fotorama').fotorama({
  data: [
    {img: '1.jpg', thumb: '1_pre.jpg', full: '1_big.jpg', caption: 'One'},
    {img: '2.jpg', thumb: '2_pre.jpg', full: '2_big.jpg', caption: 'Two'},
    {img: '3.jpg', thumb: '3_pre.jpg', full: '3_big.jpg', caption: 'Three'}
  ],
  fullscreenIcon: true
});

#`html` type: `array`, default: `null`

Массив, содержащий джейквери-объекты или строки ХТМЛ для внедрения в фотораму:

An array containing jQuery objects or HTML-strings for embedding in photorama:

$('#my-fotorama').fotorama({
  html: {
    // HTML for the first frame:
    0: '<span class="super-puper">All new caption</span>',
    // Nothing for second...
    // Third:
    2: $('.fotorama-element').eq(2),
  }
});

$('#my-fotorama').fotorama({
  html: {
    // ХТМЛ для первого кадра:
    0: '<span class="super-puper">All new caption</span>',
    // Для второго ничего...
    // Для третьего:
    2: $('.fotorama-element').eq(2),
  }
});

ЦСС для встраиваемых блоков пишите самостоятельно.
Пример

You should write the CSS for embedded blocks yourselves.
Example

#`hash` type: `boolean`, default: `false`

Включает изменение УРЛ страницы при переходах между изображениями. Чтобы другу послать ссылку на конкретную фотографию :-)

Lets the page change its URL upon switching images. To send a link to a specific photo to a friend :-)

Рекомендуется использовать только с одной фоторамой на странице.

Better be used with only one fotorama per page.

#`startImg` type: `number`, default: `0`

Индекс изображения, которое будет показано при загрузке галереи. 0 — первое, 1 — второе и т. д.

Index of the image that will be shown upon initialization of the gallery. 0 — the first, 1 — the second etc.

#Callbacks

#Колбеки

Функции, выполняемые при основных событиях. Принимают параметр data — массив, содержащий в себе индекс активного изображения, DOM-элементы с активным кадром и превьюшкой, текушую подпись; this — блок с фоторамой:

Functions executed on main events. Accepts the parameter data — array that contains the index of the active image, DOM-elements with an active frame and preview, current caption; this — block with the fotorama:

$('#my-fotorama').fotorama({
  onShowImg: function(data) {
    var imgSrc = $(data.img).find('.fotorama__img').attr('src');
    alert('Active index: ' + data.index +
          '. Image src: ' + imgSrc +
          '. Caption: ' + data.caption + '.');
    // var activeThumb = $(data.thumb);
    // ...
  }
});

#`onShowImg` type: `function`, default: `null`

Выполняется при смене активного изображения.

Executed upon switching image.

#`onClick` type: `function`, default: `null`

Клик по контейнеру с изображениями.

Clicking the image container.

#`onSlideStop` type: `function`, default: `null`

Выполняется, когда шахта с изображениями останавливается после анимации.

It is executed when the image shaft stops after slide.

Play with options and callbacks at this Fiddle

Поиграйте с опциями и колбеками в этом фидле

#API

#АПИ

Once initialized, fotorama listens for special events. These allow to control the gallery through your custom functions:

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

var fotorama = $('#my-fotorama').fotorama();
fotorama.trigger('rescale', [700, 467]);

#`showimg` `.trigger('showimg', [index, transitionDuration])`

Показывает изображение с заданным индексом, index может быть как числом, так и ключевым словом — 'first', 'last', 'prev', 'next'. Параметр transitionDuration — задаёт длительность анимации в миллисекундах, по умолчанию — 333.

Shows the image with the set index (number or keyword — 'first', 'last', 'prev', 'next'). Parameter transitionDuration — sets the duration of animation in milliseconds; by default — 333.

#`play` `.trigger('play', interval)`

Начинает воспроизведение слайд-шоу с заданным интервалом в миллисекундах. По умолчанию — interval: 5000.

Starts the slideshow with a set interval in milliseconds. By default, interval: 5000.

#`pause` `.trigger('pause')`

Останавливает воспроизведение слайд-шоу.

Stops the slideshow.

#`fullscreenopen` `.trigger('fullscreenopen')`

Открывает фотораму в полноэкранном режиме.

Opens fotorama in fullscreen mode.

#`fullscreenclose` `.trigger('fullscreenclose')`

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

Leaves the fullscreen mode.

#`rescale` `.trigger('rescale', [width, height, aspectRatio, transitionDuration])`

Изменяет размер контейнера с изображениями, width — ширина в пикселях или процентах, height — высота в пикселях; aspectRatio — отношение ширины к высоте; transitionDuration — длительность анимации в миллисекундах, по умолчанию — 0 (без анимации).

Changes the size of image container, width — with in pixels or percents, height — height in pixels; aspectRatio — width divided by height; transitionDuration — duration of animation in milliseconds; by default — 0 (no animation).

API demo

Пример использования АПИ

#Three ways to define options

#Три способа указания опций

#List of options

#Cписок опций

#width type: number || string, default: 'auto'

#height type: number || string, default: 'auto'

#aspectRatio type: number || string, default: 'auto'

#touchStyle type: boolean, default: true

#click type: boolean, default: true

#loop type: boolean, default: false

#transitionDuration type: number, default: 333

#background type: string, default: null

#margin type: number, default: 5

#minPadding type: number, default: 10

#alwaysPadding type: boolean, default: false

#zoomToFit type: boolean, default: true

#cropToFit type: boolean, default: false

#nav type: string || boolean, default: 'thumbs'

#navPosition type: string, default: 'auto'

#navBackground type: string, default: null

#dotColor type: string, default: null

#thumbSize type: number, default: horizontal mode — 48, vertical — 64

#thumbSize type: number, default: горизонтальный режим — 48, вертикальный — 64

#thumbMargin type: number, default: 5

#thumbBorderWidth type: number, default: 3

#thumbBorderColor type: string, default: null

#arrows type: boolean, default: true

#arrowsColor type: string, default: null

#arrowPrev type: string, default: horizontal mode — ◄, vertical — ▲

#arrowPrev type: string, default: горизонтальный режим — ◄, вертикальный — ▲

#arrowNext type: string, default: horizontal mode — ►, vertical — ▼

#arrowNext type: string, default: горизонтальный режим — ►, вертикальный — ▼

#caption type: string || boolean, default: 'none'

#flexible type: boolean, default: false

#fitToWindowHeight type: boolean, default: false

#fullscreen type: boolean, default: false

#fullscreenIcon type: boolean, default: false

#autoplay type: boolean || number, default: false

#stopAutoplayOnAction type: boolean, default: true

#vertical type: boolean, default: false

#preload type: number, default: 3

#preloader type: string, default: 'dark'

#shadows type: boolean, default: true

#data type: array, default: null

#html type: array, default: null

#hash type: boolean, default: false

#startImg type: number, default: 0