ap.fotorama

ap.fotorama — AngularJS Fotorama

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

Description

Angular module for Fotorama jQuery plugin

Demo, sandbox

Usage

Angular module dependency:

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

As a directive:

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

Fotorama setup in controller:

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

Default settings can be overridden in a service variable apFotoramaConfig

Setting up

• width {string} - null Fotorama width (500 || '100%')

• minwidth {string} - null

• maxwidth {string} - 100% ('100%')

• width {string} - null Fotorama height

• minheight {string} - null

• maxheight {string} - null

• ratio {string} - null ('16/9' || 500/333 || 1.5)

• margin {string} - 2

• glimpse {string} - 0

navigation, thumbs

• nav {string} - dots ('thumbs' || false)

• navposition {string} - bottom ('top')

• thumbwidth {string} - 64

• thumbheight {string} - 64

• thumbmargin {string} - 2

• thumbborderwidth {string} - 2

• allowfullscreen {string} - false (true || 'native')

• fit {string} - contain ('cover' || 'scaledown' || 'none')

• transition {string} - slide ('crossfade' || 'dissolve')

• transitionduration {string} - 300

• captions {string} - true

• hash {string} - false

• startindex {string} - 0

• loop {string} - false

• autoplay {string} - false

• stopautoplayontouch {string} - true

• keyboard {string} - false

rewinding

• arrows {string} - true

• click {string} - true

• swipe {string} - true

• trackpad {string} - true

• shuffle {string} - false

• direction {string} - ltr ('rtl')

• shadows {string} - true

fields

• id {string} - id Name of image id field

• thumb {string} - thumb Name of thumb field

• img {string} - `image' Name of image field

• full {string} - original Name of original field

• caption {string} - caption Name of caption field

• active {string} - active Name of active image index

• domain {string} - `` For crossdomain requests ('http://domain.name')