README
Fotorama
ap.fotorama — AngularJSDescription
Angular module for Fotorama jQuery plugin
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 heightminheight
{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 fieldthumb
{string}
-thumb
Name of thumb fieldimg
{string}
- `image' Name of image fieldfull
{string}
-original
Name of original fieldcaption
{string}
-caption
Name of caption fieldactive
{string}
-active
Name of active image indexdomain
{string}
- `` For crossdomain requests ('http://domain.name')