
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
cws-angular2-image-gallery
Advanced tools
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 node.js script. The processed images will be stored to your applications assets or, if you'd like to, at a remote location. During runtime everything runs client-side and there is no separate server-side communication involved. The viewer takes care that an optimal image quality is served based on the device resolution.
http://oidamo.de/angular2-image-gallery/
Install node (>= 4.2.2) and graphicsmagick: http://www.graphicsmagick.org/README.html#installation
npm install angular2-image-gallery --save
imports: [
BrowserModule,
FormsModule,
HttpModule,
Angular2ImageGalleryModule <-----
],
import 'web-animations-js/web-animations.min';
import 'hammerjs/hammer';
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'web-animations-js';
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
<gallery
[flexBorderSize]="3"
[flexImageSize]="7"
[galleryName]="'yourGalleryName'"
(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!
If you'd like to know how you could fetch your images from an external data source CLICK HERE
This is possible, but not the intent of this project. Please CLICK HERE
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.
FAQs
Responsive Angular 2 image gallery
The npm package cws-angular2-image-gallery receives a total of 0 weekly downloads. As such, cws-angular2-image-gallery popularity was classified as not popular.
We found that cws-angular2-image-gallery demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.