/ap.fotorama

Fotorama module for AngularJS

Primary LanguageJavaScriptMIT LicenseMIT

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')