var app = angular.module('plunker', ['angular-fotorama']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.fotoArray = [
{
"url": "http://s.fotorama.io/1.jpg",
"caption": "Hello",
"type": "image"
},
{
"url": "https://clips.vorwaerts-gmbh.de/VfE_html5.mp4",
"thumb": "",
"caption": "Thumb should be provided",
"type": "video"
},
{
"url": "http://s.fotorama.io/2.jpg",
"caption": "",
"type": "image"
},
{
"url": "https://youtu.be/C0DPdy98e4c",
"thumb": "",
"caption": "",
"type": "video"
},{
"url": "https://vimeo.com/78961286",
"thumb": "",
"caption": "",
"type": "video"
}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<!-- 1. Link to jQuery (1.8 or later), -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js" data-require="angular.js@1.3.x"></script>
<link href="style.css" rel="stylesheet" />
<!-- fotorama.css & fotorama.js. -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>slide or use navigation for next previous image videos</p>
<div class="fotoramaDiv">
<div id="fotoGallery" data-auto="false" fotorama item="fotoArray" class="fotorama" data-allowfullscreen="true" data-arrows="true" data-width="100%" data-ratio="800/600" data-minwidth="400" data-maxwidth="1000" data-minheight="300" data-maxheight="100%">
</div>
</div>
<script src="angular-fotorama.js"></script>
</body>
</html>
/* Put your css in here */
/**
* @author Sufiyan momin
* @description showing image and videos(sample video, youtube video, vimeo video)
* for example <div fotorama item="fotoArray" class="fotorama" data-allowfullscreen="true"></div> provide different options refer http://fotorama.io/customize/
*/
angular.module('angular-fotorama', []).directive('fotorama', ['$timeout', '$compile', function ($timeout) {
return {
link: function (scope, element, attrs) {
scope.$watch(attrs.item, function (value) {
var val = angular.copy(value);
if (val) {
console.log(val)
$timeout(function () {
var fotoramaKey = [];
angular.forEach(val, function (val, key) {
var fotoObj = {};
if (val.type == 'image') { // it is an image
fotoObj.img = val.url;
fotoObj.thumb = val.url;
fotoObj.caption = val.caption;
fotoramaKey.push(fotoObj);
} else { // it is video
fotoObj.thumb = val.thumb;
fotoObj.caption = val.caption;
fotoObj.video = val.url;
fotoramaKey.push(fotoObj);
}
});
$(element).fotorama({
data:fotoramaKey
});
});
}
}, true);
}
};
}]);