<!DOCTYPE html>
|
<html ng-app="demo">
|
<head>
|
<title>ng-image-gallery</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<!-- Local Dependencies -->
|
<!-- <script src="../bower_components/angular/angular.js"></script>
|
<script src="../bower_components/angular-animate/angular-animate.js"></script>
|
<script src="../bower_components/hammerjs/hammer.min.js"></script> -->
|
|
<!-- Dependencies -->
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
|
<script src="https://rawgit.com/hammerjs/hammer.js/v2.0.8/hammer.min.js"></script>
|
<link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700" rel="stylesheet">
|
|
<!-- Module files-->
|
<script src="/dist/ng-image-gallery.min.js"></script>
|
<link href="/dist/ng-image-gallery.min.css" rel="stylesheet"/>
|
|
<style type="text/css">
|
.ng-image-gallery{
|
font-family: 'Work Sans', sans-serif !important;
|
font-weight: 300;
|
}
|
</style>
|
</head>
|
<body ng-controller="main">
|
|
<h1><a href="https://github.com/thatisuday/ng-image-gallery" style="text-decoration:none; color:#333;">ng-image-gallery</a></h1>
|
|
<p ng-hide="counter == 0">Populating more images after {{counter}} seconds.</p>
|
|
<button ng-click="openGallery()">Open Gallery</button>
|
<button ng-click="addPhoto()">Add Photo</button>
|
<button ng-click="removePhoto()">Remove Photo</button>
|
|
<br/>
|
<br/>
|
|
<button ng-click="toggleThumbnails()">Enable/Disable Thumbnails</button>
|
<button ng-click="toggleInline()">Modal/Inline Gallery</button>
|
<button ng-click="toggleBubbles()">{{(bubbles) ? 'Switch off' : 'Switch on'}} bubbles</button>
|
<button ng-click="toggleImgBubbles()">{{(imgBubbles) ? 'Switch off' : 'Switch on'}} Image bubbles</button>
|
|
<br/>
|
<br/>
|
|
<label>Thumbnail size</label> <input type="number" ng-model="thumbSize"><br/>
|
<label>Bubble size</label> <input type="number" ng-model="bubbleSize">
|
|
<br/>
|
<br/>
|
|
<button ng-click="closeOnBackground()">{{(bgClose) ? 'Do not close' : 'Close'}} on background click (modal gallery)</button>
|
|
<br/>
|
<br/>
|
|
Choose animation<br/>
|
|
<label ng-repeat="class in ['fade', 'fadeup', 'zoom', 'slide', 'pop', 'revolve']">
|
<input type="radio" name="imgAnim" ng-model="conf.imgAnim" ng-value="class"/> {{class}}
|
</label>
|
|
|
<br/>
|
<br/>
|
<br/>
|
|
<ng-image-gallery images="images" methods="methods" conf="conf" thumbnails="thumbnails" thumb-size="thumbSize" inline="inline" bubbles="bubbles" bubble-size="bubbleSize" img-bubbles="imgBubbles" bg-close="bgClose" piracy="true" on-open="opened();" on-close="closed();" on-delete="delete(img, cb)" bg-close="false"></ng-image-gallery>
|
|
<script>
|
angular
|
.module('demo', ['thatisuday.ng-image-gallery'])
|
.controller('main', function($scope, $timeout, $interval){
|
$scope.counter = 5;
|
var counterIntvl = $interval(function(){
|
$scope.counter = $scope.counter - 1;
|
if($scope.counter == 0){
|
$interval.cancel(counterIntvl);
|
}
|
}, 1000);
|
|
// Local images
|
$scope.images = [
|
{
|
id: 546,
|
title : 'My first image',
|
alt : 'photo1',
|
url : '/demo/demo-images/1.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/1.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/1.jpg',
|
extUrl : 'http://google.com/image/1',
|
desc : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat enim dui, vitae pretium turpis faucibus ac. Donec nisi ex, tempus non leo vel, laoreet convallis libero.',
|
deletable : true
|
},
|
{
|
id: 892,
|
url : '/demo/demo-images/2.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/2.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/2.jpg',
|
desc : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
},
|
{
|
id: 5454,
|
url : '/demo/demo-images/3.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/3.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/3.jpg',
|
deletable : true,
|
},
|
{
|
id: 34,
|
title : 'My fourth image',
|
alt : 'photo4',
|
url : '/demo/demo-images/4.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/4.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/4.jpg',
|
extUrl : 'http://google.com/image/4',
|
desc : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc consequat enim dui, vitae pretium turpis faucibus ac. Donec nisi ex, tempus non leo vel, laoreet convallis libero. Vestibulum luctus libero nisl, elementum placerat libero ornare quis. Etiam aliquet, tellus et sagittis ullamcorper, nulla arcu volutpat orci, id vehicula quam orci sed nisi. Cras pellentesque faucibus elit a sagittis. Ut bibendum, arcu ac maximus efficitur, odio magna luctus nisi, a sollicitudin orci odio in quam. Nunc non tempus quam, vel ullamcorper massa. Quisque aliquet velit eget leo venenatis, eu sagittis justo aliquet. Ut ac sollicitudin tortor. Duis id egestas lacus. In nibh eros, pretium sed cursus sed, lobortis ac elit.',
|
deletable : true
|
},
|
{
|
id: 415,
|
url : '/demo/demo-images/5.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/5.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/5.jpg',
|
},
|
{
|
id: 5582,
|
url : '/demo/demo-images/6.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/6.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/6.jpg',
|
},
|
{
|
id: 656,
|
title : 'My seventh image',
|
alt : 'photo7',
|
url : '/demo/demo-images/7.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/7.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/7.jpg',
|
},
|
{
|
id: 475,
|
url : '/demo/demo-images/8.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/8.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/8.jpg',
|
extUrl : 'http://google.com/image/8',
|
deletable : true
|
},
|
{
|
id: 452,
|
title : 'My 9th image',
|
alt : 'photo9',
|
url : '/demo/demo-images/9.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/9.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/9.jpg',
|
}
|
];
|
|
$scope.moreImages = [
|
{
|
id: 658,
|
url : '/demo/demo-images/10.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/10.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/10.jpg',
|
},
|
{
|
id: 952,
|
url : '/demo/demo-images/11.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/11.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/11.jpg',
|
extUrl : 'http://google.com/image/11',
|
deletable : true
|
},
|
{
|
id: 8575,
|
title : 'My twelth image',
|
alt : 'photo12',
|
url : '/demo/demo-images/12.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/12.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/12.jpg',
|
},
|
{
|
id: 3652,
|
url : '/demo/demo-images/13.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/13.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/13.jpg'
|
}
|
];
|
|
$scope.conf = {
|
imgAnim : 'fadeup'
|
};
|
|
/*****************************************************/
|
|
$timeout(function(){
|
$scope.images = $scope.images.concat($scope.moreImages);
|
}, 5000);
|
|
$scope.addPhoto = function(){
|
var n = Math.floor(Math.random() * 13) + 1;
|
$scope.images.push(
|
{
|
url : '/demo/demo-images/' + n + '.jpg',
|
thumbUrl : '/demo/demo-images/thumbs/' + n + '.jpg',
|
bubbleUrl : '/demo/demo-images/bubbles/' + n + '.jpg'
|
}
|
);
|
}
|
|
$scope.removePhoto = function(){
|
if($scope.images.length > 1) $scope.images.pop();
|
}
|
|
// Thumbnails
|
$scope.thumbnails = true;
|
$scope.toggleThumbnails = function(){
|
$scope.thumbnails = !$scope.thumbnails;
|
}
|
|
// Inline
|
$scope.inline = false;
|
$scope.toggleInline = function(){
|
$scope.inline = !$scope.inline;
|
}
|
|
// Bubbles
|
$scope.bubbles = true;
|
$scope.toggleBubbles = function(){
|
$scope.bubbles = !$scope.bubbles;
|
}
|
|
// Image bubbles
|
$scope.imgBubbles = false;
|
$scope.toggleImgBubbles = function(){
|
$scope.imgBubbles = !$scope.imgBubbles;
|
}
|
|
// Background close
|
$scope.bgClose = false;
|
$scope.closeOnBackground = function(){
|
$scope.bgClose = !$scope.bgClose;
|
}
|
|
// Gallery methods gateway
|
$scope.methods = {};
|
$scope.openGallery = function(){
|
$scope.methods.open();
|
};
|
|
// Gallery callbacks
|
$scope.opened = function(){
|
console.info('Gallery opened!');
|
}
|
|
$scope.closed = function(){
|
console.warn('Gallery closed!');
|
}
|
|
$scope.delete = function(img, cb){
|
cb();
|
}
|
})
|
;
|
</script>
|
</body>
|
</html>
|
