Angular PhotoSwipe Live Demo

AngularJS directive for PhotoSwipe.

Find me on:

Installation

You can choose your preferred method of installation:

Through bower: bower install ng-photoswipe --save
Through npm: npm install ng-photoswipe --save
Download from github: angular-photoswipe.min.js

Usage

Inject ngPhotoswipe module in your application with:

angular
  .module('myApp', ['ngPhotoswipe'])

and use the directive as below:

<div ng-photoswipe
     slides="slides"
     slide-selector=".my-awesome-thumbnail"
     open="isOpen"
     onClose="onGalleryClose()"
     template="'./myGallery.template.html'"
     options="opts"></div>

where slides is an object defining the images, and the slideSelector is a valid selector to query the gallery images.

The open attribute is a scope boolean that start the gallery when truthy.

The onClose callback will be called after the gallery closes, not surprising.

You can also provide your own template that will override the default one.

(For further infos follow the Official docs)

NOTE: If you plan to have multiple galleries in your page, provide a parameter to the ng-photoswipe attribute, that needs to uniquely identify one directive instance.

Changelog

v0.1.0 (May 05, 2016)

Animation support for multiple galleries
Fix start animation

v0.0.9 (Feb 15, 2016)

Add ngTemplates grunt task
Fix npm package version

v0.0.8 (Dec 28, 2015)

Add custom event to manually start Photoswipe
Better demo

v0.0.7 (Dec 18, 2015)

Better grunt build
Add template attribute to override the default html template

v0.0.6 (Dec 11, 2015)

Fix DI bug due to undefined controller
Improve jshint rules

v0.0.5 (Dec 08, 2015)

Update bower configuration

v0.0.4 (Aug 29, 2015)

Move link definition inside directive block

v0.0.3 (Aug 27, 2015)

Update demoApp
Better code style

v0.0.2 (Aug 27, 2015)

Add JP's jshint
External template compilation

v0.0.1 (Aug 26, 2015)

Add directive template
Add ngPhotoswipeProvider

newmesiss/angular-photoswipe