|
Параметры могут передаваться через атрибуты данных:
<div class="fotorama"
data-width="700"
data-maxwidth="100%"
data-ratio="16/9"
data-allowfullscreen="true"
data-nav="thumbs">
<img src="1.jpg">
<img src="2.jpg">
</div>
...или JavaScript:<.p>
$('.fotorama').fotorama({
width: 700,
maxwidth: '100%',
ratio: 16/9,
allowfullscreen: true,
nav: 'thumbs'
});
width число или строка
Ширина контейнера в пикселях или процентах.
minwidth число или строка
Минимальная ширина сцены в пикселах или процентах.
maxwidth число или строка
Максимальная максимальная ширина контейнера в пикселях или процентах.
height число или строка
Высота контейнера сцены в пикселях или процентах.
minheight число или строка
Минимальная высота сцены в пикселах или процентах.
maxheight число или строка
Максимальная высота контейнера в пикселях или процентах.
ratio число или строка
Ширина, деленная на высоту. Рекомендуется, если вы используете процентную ширину.
Статья: Размеры
margin число
Горизонтальные поля для кадров в пикселях.
glimpse число или строка
Посмотреть размер соседних кадров в пикселах или процентах.
nav строка или булев тип
Стиль навигации:
'dots' по умолчанию
Точки в стиле iPhone.'thumbs'
Эскизы.false
Ничего.
Статья: Миниатюры
navposition число или строка
Позиция навигации контейнера: 'bottom' or 'top'.
Статья: Позиция навигации
navwidth строка
Ширина контейнера навигации в пикселях или процентах.
thumbwidth число
Ширина уменьшенного изображения в пикселях.
thumbheight число
Высота уменьшенного изображения в пикселях.
thumbmargin число
Размер полей эскизов.
thumbborderwidth число
Ширина рамки активной миниатюры.
allowfullscreen булев тип или строка
Полноэкранный режим:
false по умолчанию
true'native'
Статья: Полноэкранный режим
fit строка
Как вставить изображение в Fotorama:
'contain' по умолчанию'cover''scaledown''none'
Статья: Подгонка
thumbfit строка
Как вставить миниатюру в рамку, по умолчанию cover.
transition строка
Определяет, какой переход использовать:
'slide' по умолчанию'crossfade''dissolve'
clicktransition строка
Определяет альтернативный переход для использования при клике.
transitionduration число
Продолжительность анимации в миллисекундах.
Статья: Переходы
captions булев тип
Видимость субтитров.
Статья: Субтитры
hash булев тип
Статья: Хеш
startindex число или строка
Индекс или идентификатор кадра, который будет отображаться при инициализации фотогалереи.
loop булев тип
Включает цикл.
Статья: Цикл
autoplay булев тип или число
Включает слайд-шоу. Включите его с истинным или любым интервалом в миллисекундах.
stopautoplayontouch булев тип
Остановка слайд-шоу при любом действии пользователя с помощью fotorama.
Статья: Автовоспроизведение
keyboard булев тип или объект
Включает навигацию по клавиатуре.
Статья: Клавиатура
arrows булев тип
Включает навигационные стрелки над кадрами.
true Defaultfalse'always'
Не скрывайте элементы управления при наведении или кране.
click булев тип
Перемещение между кадрами осуществляется щелчком.
swipe булев тип
Перемещение между кадрами путем проведения по слайду пальцем или кликом мыши и перетаскиванием.
trackpad булев тип
Включает поддержку трекпада и горизонтальное колесо мыши.
Статья: Стрелки, клик, проведение по экрану
shuffle булев тип
Перемешивает кадры при запуске.
Статья: Перемешка
direction строка
Устанавливает направление кадров: ltr или rtl.
Статья: Справа налево (rtl)
spinner объект
Spinner опции:
$('.fotorama').fotorama({
spinner: {
lines: 13,
color: 'rgba(0, 0, 0, .75)'
}
});
Документация - Spin.js docs
shadows булев тип
Включает тени.
Переопределение значений по умолчанию
Переопределите значения по умолчанию, указав fotoramaDefaults перед загрузкой Fotorama:
<script>
fotoramaDefaults = {
width: 700,
maxwidth: '100%',
ratio: 16/9,
allowfullscreen: true,
nav: 'thumbs'
}
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
|