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

angular2-image-gallery-fixed

v1.0.2

Published

BRUNSMANN Thomas [email protected]

Downloads

24

Readme

BRUNSMANN Thomas [email protected]

this project was forked from BenjaminBrandmeier/angular2-image-gallery

Added some bug fix :

  • Remove unused imported module and remove BrowserModule (so that, we are able to lazyLoad this library)
  • Fix : add condition to detecChange
  • Fix : update isScrolledIntoView function to load image who is not in the viewport

Angular 2 Image Gallery

Build Status BrowserStack Status npm version npm downloads

----> compatible with Angular 8+ <----

Responsive image gallery designed for high resolution images.

The project consists of a gallery, a viewer and a script for image preparation.

Before using the gallery, you have to process all of your images that will be part of your gallery with the convert script. The processed images will be stored to your applications assets or, if you wish, at a remote location. During runtime everything runs client-side and there is no separate server-side communication involved. The viewer takes care an optimal image quality is served based on the screen resolution.

Demo

https://oidamo.de/gallery-demo.html

How to use the gallery in your project

Pre-requirements

Install graphicsmagick: http://www.graphicsmagick.org/README.html#installation

Embed in your project

1. Install angular2-image-gallery

npm install angular2-image-gallery --save
npm install hammerjs --save

2. Import angular2-image-gallery in your Angular module

imports: [
  Angular2ImageGalleryModule
],

3. Add hammer.js for support of mobile devices

Add the following line to your main.ts file:

import 'hammerjs';

4. Run convert script

node node_modules/angular2-image-gallery/convert.js <path/to/your/images>

Add a flag to define the order of the images inside the gallery

-n sort by file name (default)

-d sort chronologically by the original creation time (e.g. for coverages of a wedding)

-c sort by primary image color

Additional optional parameter to support multiple galleries. Add it if you want to put your images into a separate gallery.

--gName=yourGalleryName

5. Embed gallery in your template

<gallery 
    [flexBorderSize]="3" 
    [flexImageSize]="7"
    [galleryName]="'yourGalleryName'" 
    [maxRowsPerPage]="100"
    (viewerChange)="yourNotificationFunction($event)">
</gallery>

All parameters are optional. You may play around on the demo site to find out what parameters suit your needs.

The viewerChange event notifies you when the viewer component gets opened or closed.

That's it, start your application and have a look!

Fetching images from an external data source

If you'd like to know how you could fetch your images from an external data source CLICK HERE

I don't want to use the convert script and provide my own metadata JSON

This is possible, but not the intent of this project. Please CLICK HERE

Currently used tools

  • Angular 7.0.0
  • NodeJS 8.11.2
  • graphicsmagick

Troubleshooting

If the conversion process fails, make sure you have enough swap space provided.

If you experience any other issues, please raise an issue on GitHub.