benjaminbrandmeier / angular2-image-gallery Goto Github PK

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

For a first implementation a carousel is not necessary.

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)

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?

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

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

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?

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

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?

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

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.

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 ~

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.

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

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?

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?

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

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!

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.

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.

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.

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

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.

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

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!

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}" ... />

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

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!

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

(Gallery 1 is ok)

(Gallery 2 and 3 is not ok)

Here is my HTML code:

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

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.

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

Hello

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

How can I use it with SystemJS ?

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"
  },

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.

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

• Margin between images
• Image size factor

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.

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.

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

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

Maybe include SauceLabs, Browserstack, etc. for this.

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?

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.

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)

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

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

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.

Hello

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

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.

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)

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