Русская документация

ap.fotorama — AngularJS Fotorama

Описание

Angular-модуль для jQuery-плагина Fotorama

Демо, песочница

Применение

Подключение модуля:

angular.module('myApp', ['ap.fotorama']);

Директива:

<div ap-fotorama="options" ng-model="items">

Настройка в контроллере:

$scope.items = [{img: 'iurl', thumb: 'turl', full: 'furl'}, {...}, ...]; //Model
$scope.options = {
  width: '100%',
  height: 400,
  loop: true,
  keyboard: true,
  nav: 'thumbs'}
}

Колбек события:

$scope.options = {
  load: function (e, extra) {
    console.log(extra); //{user: undefined/true} дополнительные данные
  },
  show: null
}

Настройку по умолчанию можно переопределить в сервисе-переменной apFotoramaConfig

Настройка

Контейнер для изображений

• width {string} - Ширина Фоторамы null (500 || '100%')
• minwidth {string} - null
• maxwidth {string} - 100% ('100%')
• width {string} - Высота Фоторамы null
• minheight {string} - null
• maxheight {string} - null
• ratio {string} - Соотношение сторон изображения null ('16/9' || 500/333 || 1.5)
• margin {string} - 2
• glimpse {string} - 0 Отображение частей соседних изображений ('30%')
• shadows {string} - true
• allowfullscreen {string} - Показывать кнопку перехода в полноэкранный режим false (true || 'native')
• fit {string} - Позиционирование изображения contain ('cover' || 'scaledown' || 'none')
• captions {string} Подписи под изображениями - true

Панель миниатюр

• nav {string} - dots Тип указателей на изображения ('thumbs' || false)
• navposition {string} - Расположение панели указателей bottom ('top')
• thumbwidth {string} - Ширина миниатюры 64
• thumbheight {string} - Высота миниатюры 64
• thumbmargin {string} - 2
• thumbborderwidth {string} - 2

Слайдшоу

• autoplay {string} - Слайдшоу false
• stopautoplayontouch {string} - true

Настройка перемотки

• arrows {string} - Стрелочки true
• click {string} - Перемотка щелчками по краям true
• swipe {string} - Перемотка перетаскиванием true
• trackpad {string} - true
• keyboard {string} - Перемотка стрелками на клавиатуре false
• loop {string} - Зациклить перемотку false
• transition {string} - Тип переходов slide ('crossfade' || 'dissolve')
• transitionduration {string} Время перехода, мс - 300
• direction {string} - ltr ('rtl')

Имена полей

• id {string} - id Имя поля с id картинки
• thumb {string} - thumb Имя поля с миниатюрой
• img {string} - `image' Имя поля с изображением
• full {string} - original Имя поля с оригиналом
• caption {string} - caption Имя поля с заголовком
• active {string} - active Указатель активной фотки

Прочее

• hash {string} - Номера слайдов в строке браузера false
• startindex {string} - Индекс первого изображения 0
• shuffle {string} - Перемешать изображения false
• domain {string} - `` Для кроссдоменных запросов ('http://domain.name')

Колбеки событий

• load {function} Загрузка изображений
• show {function} Начало перехода к изображению. Данные: user (undefined - спровоцировано программой/true - спровоцировано пользователем)
• showend {function} Конец перехода к изображению
• fullscreenenter {function} Переход в полноэкранный режим
• fullscreenexit {function} Выход из полноэкранного режима
• loadvideo {function} Загрузка видео
• unloadvideo {function} Выгрузка видео
• stagetap {function} ...
• ready {function} ...
• error {function} Ошибка загрузки
• stopautoplay {function} Запуск слайдшоу
• startautoplay {function} Остановка слайдшоу