npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ng-photoswipe

v0.2.0

Published

An angular wrapper for PhotoSwipe

Downloads

95

Readme

Angular PhotoSwipe

AngularJS directive for PhotoSwipe.

Copyright © 2016, Massimiliano Sartoretto

Find me on: alt text alt text alt text

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"
     on-close="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 on-close 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)

Changelog

v0.1.1 (May 12, 2016)

  • Fix overridden opts

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