ap.fotorama v0.0.3
ap.fotorama — AngularJS Fotorama
Description
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 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 indexdomain
{string}
-For crossdomain requests ('http://domain.name')