ng-photoswipe
Version:
An angular wrapper for PhotoSwipe
58 lines (46 loc) • 1.65 kB
HTML
<html>
<head>
<link rel="stylesheet" href="../../bower_components/photoswipe/dist/photoswipe.css">
<link rel="stylesheet" href="../../bower_components/photoswipe/dist/default-skin/default-skin.css">
</head>
<body>
<div ng-controller="demoCtrl as vm">
<h1> {{ vm.title }} </h1>
<button ng-click="vm.showGallery()"> Show Gallery (external btn) </button>
<ul class="slide-list">
<li ng-repeat="s in vm.slides track by $index" ng-click="vm.showGallery($index)">
<img ng-src="{{ s.src }}" alt="slide number {{ $index }}" />
</li>
</ul>
<div ng-photoswipe slides="vm.slides" open="vm.open" slide-selector=".slide-list > li > img"
on-close="vm.closeGallery()" options="vm.opts"></div>
</div>
<script type="text/javascript" src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="../../bower_components/photoswipe/dist/photoswipe.js"></script>
<script type="text/javascript" src="../../bower_components/photoswipe/dist/photoswipe-ui-default.min.js"></script>
<script src="../../angular-photoswipe.min.js"></script>
<script src="./app.js"></script>
</body>
</html>
<style>
button {
margin-bottom: 20px;
padding: 5px 10px;
}
.slide-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.slide-list > li {
display: inline;
}
.slide-list > li:hover {
cursor: pointer;
}
.slide-list > li > img {
width: 100px;
height: 100px;
}
</style>