benjaminbrandmeier/angular2-image-gallery

Image Gallery built with Angular 17+, node.js and GraphicsMagick

Angular 2 Image Gallery

----> compatible with Angular 17+ <----

Responsive image gallery designed for high resolution images.

The project consists of a gallery (+ viewer) and a script for image preparation.

Demo

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

Fundamentals

Before using the gallery, you have to process all of your images with the convert script.

The processed images will be stored to your applications assets.

The viewer takes care of an optimal image quality being served based on the users screen resolution.

Installation

1. Install graphicsmagick

Follow the instructions: http://www.graphicsmagick.org/README.html#installation

2. Install dependencies

npm install angular2-image-gallery hammerjs --save

3. Import modules

imports: [
  ...,
  Angular2ImageGalleryModule,
  HammerModule
],

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

-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)"
    [includeViewer]="true"
    [lazyLoadGalleryImages]="true"
></gallery>

All parameters are optional.

• [flexBorderSize] used to define the border thickness between the images within the gallery.
• [flexImageSize] used to define the size of the images with the gallery (not the viewer).
• [galleryName] used when having multiple galleries.
• [maxRowsPerPage] maximum rows per gallery, this will add navigation arrows once the threshold is reached.
• [viewerChange] event fires once the viewer component gets opened or closed.
• [includeViewer] provides an option to manually place the viewer outside the default DOM structure. Defaults to true.
• [lazyLoadGalleryImages] allows to disable lazy loading of gallery images. All images will be loaded at once when set to false. Defaults to true.

Different use cases

Fetching images from an external data source

Fetching 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

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.

Changelog

17.0.0

• Angular 17 support

16.0.0

• Angular 16 support

15.2.0

• Adding optional parameter [lazyLoadGalleryImages] to turn off lazy loading when set to false and instead load all gallery images at once.

15.1.0

• Adding optional parameter [includeViewer] to support use cases where viewer is placed outside the gallery component manually

15.0.0

• Angular 15 support
• Performance improvements

14.1.0

• Refactor convert script entirely
• Provide smoother output for image conversion process

14.0.0

• Angular 14 support

angular2-image-gallery's Issues

Problem if i use multiple galleries

I use 3 photo galleries which can be selected via TabControl. The first (default) always works,

(Gallery 1 is ok)

the other two do not, the thumbnail is not displayed correctly.

(Gallery 2 and 3 is not ok)

It works only if I reduce the Broser window or enlarge it.

Here is my HTML code:

<gallery class="gallery-item" [flexBorderSize]="3" [flexImageSize]="7"
[galleryName]="'Stoss-12.-13.08.2017'" (viewerChange)="notificationFunction($event)">

<gallery class="gallery-item" [flexBorderSize]="3" [flexImageSize]="7"
[galleryName]="'AWeisenstein1'" (viewerChange)="notificationFunction($event)">

<gallery class="gallery-item" [flexBorderSize]="3" [flexImageSize]="7"
[galleryName]="'BWeisenstein2'" (viewerChange)="notificationFunction($event)">

Which I make with the select visible.

this.galleryItems = $ ('. gallery-item');
this.galleryItems.hide ();
$ (This.galleryItems [tab.index]) show ().

What could be the problem?
Thanks for your help

Escape breaks fullscreen view

Great work Benjamin ;-) .. I found an issue though:

1. Click to open an image and view the image
2. Press Escape to close the image view
3. Try to click on another image

No other image opens by clicking anymore.

Tested on Chrome 53.0.2767.4 dev-m (64-bit)

Publish NPM package and make setup easier

• Publish package to npm
• Re-write conversion script to be smarter and configurable regarding embedding scenario
• Provide step by step integration guide

Make file download available

Add an icon button to the configuration menu inside the viewer to download the current image in original size.

Jumping Scroll

Some browsers, for example, the Yandex Browser, can change the height of the working area of the screen during scrolling. The gallery reacts to this by jumping into the headline. Live video is here.

Request Feat: Collections

I would like to use this as a portfolio grid.

I would like to group images, and the parent grid would use a preview image as the cover and when you click on it, it will show all of the images underneath that folder aka collection.

Also would like the option of "caption text" so I can put the collection names on hover. Perhaps the possibility to have a sidebar consisting of content (raw ng components/html), although I could do this modification myself with the help of material.

Thanks for starting this project!

Use FAB speed dial for options

Use FAB speed dial from angular material 2 as soon as it's ready. This should display the option for manual quality selection, downloading files, diashow, etc.

angular/components#860

BrowserModule imports.

Hi there. I got a problem using this library.
The specific error can be reproduced here:
http://totalautos.com.ve/#/inicio
When going to gallery it says that BrowserModule has already been loaded in console.

I managed to solve this issue locally by changing your image-gallery-module.ts import from BrowserModule to Common Module. But I have no idea how to fix that in production.

Here's a related question to my issue in stackoverflow.
http://stackoverflow.com/questions/43035981/how-to-upload-a-modified-angular2-module-to-server-in-production

Thanks in advanced.

Cant see the menu button in the expanded view

Hi, I cant see the menu button, in the demo it works but I cloned the project, set qualitySelectorShown to true and still not working

Someone knows?

Thanks!

Issue building with Angular CLI Error: Unexpected token: name (Angular2ImageGalleryModule)

I am receiving this error while building using ng b -prod below:

ERROR in Unexpected value 'GalleryComponent in D:/.../node_modules/angular2-image-gallery/app/gallery/gallery.component.d.ts' declared by the module 'Angular2ImageGalleryModule in D:
/.../node_modules/angular2-image-gallery/app/angular2imagegallery.module.ts'. Please add a @Pipe/@Directive/@Component annotation.

(...) is placeholder for actual file path

Does anyone know reason for this?

package.json

    ...
    "dependencies": {
        "@angular/animations": "^4.0.0",
        "@angular/common": "^4.0.0",
        "@angular/compiler": "^4.0.0",
        "@angular/compiler-cli": "^4.0.0",
        "@angular/core": "^4.0.0",
        "@angular/forms": "^4.0.0",
        "@angular/http": "^4.0.0",
        "@angular/platform-browser": "^4.0.0",
        "@angular/platform-browser-dynamic": "^4.0.0",
        "@angular/platform-server": "^4.0.0",
        "@angular/router": "^4.0.0",
        "angular2-image-gallery": "^0.6.2",
        "hammerjs": "^2.0.8",
        "typescript": "^2.2.1",
        "web-animations-js": "^2.2.2",
        "zone.js": "^0.6.23"
    },
    "devDependencies": {
        "@angular/cli": "^1.0.0",
        "@types/hammerjs": "^2.0.33",
        "@types/jasmine": "2.5.38",
        "@types/node": "^6.0.42",
        "codelyzer": "~2.0.0-beta.1",
        "jasmine-core": "2.5.2",
        "jasmine-spec-reporter": "2.5.0",
        "karma": "1.2.0",
        "karma-chrome-launcher": "^2.0.0",
        "karma-cli": "^1.0.1",
        "karma-jasmine": "^1.0.2",
        "karma-remap-istanbul": "^0.2.1",
        "protractor": "4.0.9",
        "ts-node": "1.2.1",
        "tslint": "^4.0.2",
        "typescript": "~2.0.3",
        "webdriver-manager": "10.2.5"
    }
}

App Module

// Import necessary modules for angular application
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { MaterializeModule } from 'angular2-materialize';
import { Ng2PageScrollModule } from 'ng2-page-scroll';
import { Parallax } from 'ng2-parallax/commonjs';
import { Angular2ImageGalleryModule } from 'angular2-image-gallery';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
const appRoutes: Routes = [...];

@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
    MaterializeModule,
    FormsModule,
    HttpModule,
    Angular2ImageGalleryModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(appRoutes),
    Ng2PageScrollModule.forRoot(),
  ],
  providers: [...]
  bootstrap: [ AppComponent ]
})
export class AppModule { }

npm version: 4.1.2
node version: 7.4.0

Script problem

I'm sure it's not the script I'm just clueless as how to run it

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

I'm stuck on this part "<path/to/your/images>"

I'm pretty sure you run this in the terminal right?

can't view expanded images

Angular is sanitizing the active image view background-image style.
Getting this any time I attempt to open the image for full size view:

"WARNING: sanitizing unsafe style value url(assets/img/gallery/....."

This is appearing for me on a fresh project, literally built just to test the gallery. Images go through graphicsmagick fine, and I'm getting all the thumbnails without issue (probably because they're img tags, and the src isn't getting set as a background style).

Otherwise the gallery looks and works great. Good work sir!

Was wondering if maybe you could just include a pipe into your template section where you inject the relative urls into the styles.
I found this method, that seems like it should work

`import { Pipe } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@pipe({
name: 'safe'
})
export class SafePipe {

constructor(protected _sanitizer: DomSanitizer) {

}

public transform(value: string, type: string = 'html'): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
	switch (type) {
		case 'html': return this._sanitizer.bypassSecurityTrustHtml(value);
		case 'style': return this._sanitizer.bypassSecurityTrustStyle(value);
		case 'script': return this._sanitizer.bypassSecurityTrustScript(value);
		case 'url': return this._sanitizer.bypassSecurityTrustUrl(value);
		case 'resourceUrl': return this._sanitizer.bypassSecurityTrustResourceUrl(value);
		default: throw new Error(`Invalid safe type specified: ${type}`);
	}
}

}`

Can simply be called by 'whatever | safe: "style"'

For non-plagiarism's sake - https://forum.ionicframework.com/t/inserting-html-via-angular-2-use-of-domsanitizationservice-bypasssecuritytrusthtml/62562/5

I wish you luck sir!

angular - ^4.0.0
node - 7.9.0

Pre-processing of big sizes even if original image is smaller

Pre-processing should only take place up to the size of the original image. After changing the script the viewer has to be adapted accordingly to pick only original images at a certain screen size.

Dynamic loading behaviour

On some mobile devices (+Microsoft Edge) the dynamic loading at the end of the gallery takes the browser to the top again.

The dynamic loading should be handled more intelligent and the look-and-feel be more user-friendly.

Viewer animations in IE 11 not working properly

Probably because of some CSS styling like the dynamic changes to left.

Configurable sorting in dev mode

When starting the application in dev mode (ng serve) provide a feature to sort the image order manually.

The result will be a data.json which has to be replaced before building for production.

Left arrow shown when first image clicked

Nice work, found minor thing: when first image clicked, left arrow is shown wrongly as updateArrowActivation() is not being called. Suggest replace updateArrowActivation() with two getters like:

public get left(): boolean {
return this.currentIdx > 0;
}

public get right(): boolean {
return this.currentIdx < this.images.length - 1;
}

Then in template:

<img [ngClass]="{'activeArrow': left}" ... />
<img [ngClass]="{'activeArrow': right}" ... />

Animations currently not working on some browser-device combinations

Image viewer animations are currently not working on (at least) the following combinations:

Desktop + Edge
Desktop + IE 11
iPad Mini + Safari
iPad Mini + Firefox

Maybe this is a general Angular 2 issue. It is working e.g. on:

Desktop + Chrome
Desktop + Firefox
Nexus 5 + Chrome
Nexus 5 + Firefox

Make gallery component configurable

Add the following attributes as input attributes for the gallery component:

• Margin between images
• Image size factor

Image rerendering behaves differently in browsers

On Firefox:
During the switch from a low to a higher quality (via auto detection or manually selected) the images are flickering now.

On Chrome:
The lower quality image is not displayed. Instead the new image is loaded step by step from top to bottom.

Convert Process Failing

I am trying to use this image gallery with https://github.com/AngularClass/angular2-webpack-starter. I am getting the following error when trying to convert any image:

Creating folder structure...
...done (folder structure)

Converting images...
src\assets\img\angular-logo.png
Error: Could not execute GraphicsMagick/ImageMagick: gm "identify" "-ping" "-ver
bose" "src\assets\img\angular-logo.png" this most likely means the gm/convert bi
naries can't be found
    at ChildProcess.<anonymous> (C:\Development\stefan-site\node_modules\gm\lib\
command.js:232:12)
    at emitOne (events.js:96:13)
    at ChildProcess.emit (events.js:188:7)
    at ChildProcess.cp.emit (C:\Development\stefan-site\node_modules\gm\node_mod
ules\cross-spawn\lib\enoent.js:36:37)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
C:\Development\stefan-site\node_modules\angular2-image-gallery\convert.js:116
                throw err;
                ^

Error: Could not execute GraphicsMagick/ImageMagick: gm "identify" "-ping" "-ver
bose" "src\assets\img\angular-logo.png" this most likely means the gm/convert bi
naries can't be found
    at ChildProcess.<anonymous> (C:\Development\stefan-site\node_modules\gm\lib\
command.js:232:12)
    at emitOne (events.js:96:13)
    at ChildProcess.emit (events.js:188:7)
    at ChildProcess.cp.emit (C:\Development\stefan-site\node_modules\gm\node_mod
ules\cross-spawn\lib\enoent.js:36:37)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)

Images are basic JPGs no bigger than 100KB.

Any suggestions?

Can't execute node script

I can't execute the node script provided.
I did npm install -g gm
It is also in my local project node_modules folder but it says the following:

Converting images...

C:\Users\myuser\Documents\totalautospzo\folder\IMG_20170114_121142.jpg

Error: Could not execute GraphicsMagick/ImageMagick: gm "identify" "-ping" "-verbose" "C:\Users\myuser\Documents\totalautospzo\folder\IMG_20170114_121142.jpg" this most likely means the gm/convert binaries can't be found

What can I do in order to make it work?

External Data Source

Hi everyone,
My question is how to implement an external data source for this gallery? Let's say if I decide to manage this through admin panel and have more than one gallery, how to load component based on data source?

Config with systemjs

Hi !
I try to use angular2-image-gallery with systemjs.
I am faced with multiple errors in the console.

Can someone explain the configuration to adopt?

Thank you.

IE 11 currently broken

With the new release of 0.7.0 it seems that IE 11 is currently broken.

This might be related to the fact that we are building ES 2015 library modules.

Ionic animations.es5.js:4 Uncaught TypeError: Cannot read property 'prototype' of undefined

After installin in working ionic project, i get this error

"dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "angular2-image-gallery": "^1.0.1",
    "ionic-angular": "3.6.1",
    "ionicons": "3.0.0",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },

Lazy Load this module causes 'BrowserModule has already been loaded' error

Lazy load this module to trigger the error. The error happens because BrowserAnimationsModule (as BrowserModule) can be included only ones in a project.
It's caused by this line: animations_1.BrowserAnimationsModule inside file angular2imagegallery.module.js
as when commented out it works and relates to:
angular/angular-cli#5684 => post: Perezmarc commented on Mar 29.

External source with firebase

Hi all,

Is there an example available with integration with firebase storage? I have a firebase function which converts images using ImageMagick, but how can I obtain such a meta json file?

Changing Gallery

Hello

If I change the galleryName parameter of the component, it doesn't work correctly

Add protractor tests

Add some protractor tests, because I'm sick of manually checking everything in all browsers. ;-)

Maybe include SauceLabs, Browserstack, etc. for this.

Large number of images: Cannot read property 'nativeElement' of undefined

I tested it with about 60 images and it errors out. Looks like it does not happen with small amount.
core.es5.js:1020 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at GalleryComponent.webpackJsonp.../../../../angular2-image-gallery/gallery/gallery.component.js.GalleryComponent.checkForAsyncLoading (gallery.component.js:167)
at gallery.component.js:144
at Array.forEach ()
at gallery.component.js:140
at Array.forEach ()
at GalleryComponent.webpackJsonp.../../../../angular2-image-gallery/gallery/gallery.component.js.GalleryComponent.scaleGallery (gallery.component.js:136)
at GalleryComponent.webpackJsonp.../../../../angular2-image-gallery/gallery/gallery.component.js.GalleryComponent.render (gallery.component.js:92)
at SafeSubscriber._next (gallery.component.js:71)
at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)

SystemJS

How can I use it with SystemJS ?

I am suggesting a bug fix on "Windows 10"

Hello.
I am a Korean developer.
We will let you know in advance that it was written in Google Translator. ^^ ;;;;
(Please ... hope to be able to communicate)

First of all, thank you very much for sharing the excellent "Component".
It is very small, but I hope to share the problem in use and hope to be helpful.

The "desktop.ini" file generated automatically by the OS causes an error when "gm convert".

I corrected it by correcting it as follows.
[Before]
If (file! = '.gitignore') ...

[After]
If (file! = '.gitignore' && file.indexOf ('. Ini') == -1) {

In the long term, it is recommended to support valid image extensions as arguments when running "convert.js".

Thank you. Healthy ~

Add loading spinner

Add a loading spinner (Angular Material 2) when a new image or a different image resolution is loaded.

Display image metadata

Display metadata of the image (technical details, etc.) inside the viewer.

TODO:

• Add information to data.json during pre-processing
• Display metadata in a responsive way (I'd like to use ng2material sidenav)

Image preview bar

Add a preview bar (at least for desktop) during navigation inside viewer.

ERROR TypeError: _this.images.forEach is not a function

I'm using an external source, 500px, for my images and am able to read the data by following the link however when I use the code <gallery [metadataUri]="'https://api.500px.com/v1/photos?...'"></gallery> I receive the error: ERROR TypeError: _this.images.forEach is not a function

Migrate to Angular 4

Migrate to Angular 4 and ensure that everything (especially Animations) are still working on all major browsers + mobile.

When using the project currently in an Angular 4 environment with Angular-CLI 1.0.0 IE 11 is broken.

Issue building with angular-cli 1.0.0

After upgrading to the latest Angular and CLI version, I can no longer build the project when "angular2-image-gallery" is include. I created a brand new project with the new angular-cli 1.0.0 and only added the "angular2-image-gallery" module (and dependencies) - per the README instructions (I have a working instance back under angular-cli version 1.0.0-RC1). I now get the following error ANY time I try to build (regardless of whether I am using AOT or not):

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in C:/some-app/node_modules/angular2-image-gallery/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in C:/some-app/node_modules/angular2-image-gallery/node_modules/@angular/core/src/metadata.d.ts, resolving symbol
NgModule in C:/some-app/node_modules/angular2-image-gallery/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in C:/some-app/node_modules/angular2-image-gallery/node_modules/@angular/core/index.d.ts, resolv
ing symbol Angular2ImageGalleryModule in C:/some-app/node_modules/angular2-image-gallery/app/angular2imagegallery.module.ts, resolving symbol Angular2ImageGalleryModule in C:/some-app/node_modules/angular2-image-gallery/app/
angular2imagegallery.module.ts

Environment:
OS: Windows 10
Node: 6.9.1
Angular CLI: 1.0.0

Any thoughts? This seems related: angular/angular-cli#3707

I'll post the code if needed. Thanks!

Extended swipe functionality

Make image in viewer movable during swiping to increase the feedback on mobile devices.

For a first implementation a carousel is not necessary.

Conversion error when missing Date Time Original in EXIF data

When running convert.js on a folder of images, if the images do not contain the Date Time Original attribute in the EXIF profile data the script generates an error and aborts.

date: features['Profile-EXIF']['Date Time Original']

TypeError: Cannot read property 'Date Time Original' of undefined

Commenting out line 89 date: features['Profile-EXIF']['Date Time Original'] allows the script to run and complete successfully.

Is Date Time Original required for certain functionality?

Adding headers to metadataUri url request

Hi!

Is it possible to add headers to the metadataUri url request? I need this for authentication purposes tot the external Uri.

Another option would be to support the use of a custom local array. Then i could request the data from my external datasource using my own http interceptor for the headers.

Thanks in advance!
Regards,
Martin

Migrate to Angular-CLI 1.0.0

Browser module in lazy loading.

Hi there.
I got this issue:

Unhandled Promise rejection: BrowserModule has already been loaded

I'm using angular2-express-starter pack which uses lazy loading.
The problem is pretty specific, but don't know how to solve it.

If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

How to generate .d.ts files?

I noticed that in the installed version of the plugin in node_modules, there are some .d.ts files. How do you build those if I'm trying to build this library from source? I made some modifications to the library in a fork to be able to support just passing it an array of images instead of having to always specify a URL that returns JSON. But when I tried to add my fork to my package.json file, it pulled it in and didn't create any of the .d.ts files in the module inside node_modules. On another note, if you feel that this would be a good feature to have in the library, I can put a pull request in and you can just merge it into your code.

Multiple galleries - lightbox viewer shows only the "last" gallery

If you have multiple galleries, clicking an image to open the viewer doesn't update the "images" in the service, and therefore all the listeners to the ImageService observable (in this case the viewer) show the last "images" passed to the service, which is the last gallery during initialization.

The fix is that each gallery component calls ImageService's next() (via the updateImages(gallery) method) before opening the viewer, thus updating all listeners (including the viewer) that this is the relevant image gallery.

I have created a pull request with the fix:
#37

Starting in viewer image

Hello

It would be nice, the gallery can start in viewer image directly

Multiple galleries not working

Error when using several gallery names @f14424b46d2f33f6366db0cc790aa2e471f8e975

e.g. [galleryName]="myGallery"
Console output tells following error:

404 Not Found for URL: http://localhost:4200/assets/img/gallery/undefined/data.json

• Images are provided at the local file structure
• Using the gallery with default root path for all images works fine.

Diashow

Include a diashow feature to make the viewer go through all images automatically.

Going back in browser leaves the page

Introduce routing concept from the viewer back to the gallery. This is especially important for mobile users.