Multiple gallery with gallerize on same page

matthewdbell commented 3 years ago

Hey Murhaf!

Great Angular Gallery - I like it!

I've got a (probably very basic!) question - I need to display multiple galleries on the same page and I am struggling to get it to work perfectly:

If I add repeated galleries like this:

then this obviously doesn't work - it shows the same imageset3 in each gallery....

doesn't work either - same as without any id

So I tried this: <gallery gallerize id="gallery-1" [items]="imageset1"> <gallery gallerize id="gallery-2" [items]="imageset2"> <gallery gallerize id="gallery-3" [items]="imageset3">

This is better - the galleries show the correct imagesets - and the click to the lightbox works - BUT in the lightbox - it again only shows imageset3 in the lightbox, no matter which gallery you click

So Finally I guessed this: <gallery gallerize="gallery-1" id="gallery-1" [items]="imageset-1"> <gallery gallerize="gallery-2" id="gallery-2" [items]="imageset-2"> <gallery gallerize="gallery-3" id="gallery-3" [items]="imageset-3">

Which just about works! But its kind of buggy and is giving a few console errors... Also allows you to click the lightbox again and endlessly open more

..... So my question is:

Please can you give me an example of how to include multiple on one page which works perfectly - I know its something to do with properly assigning the ID to the gallery but can't figure it out!

Thanks in advance

Best Matt

MurhafSousli commented 3 years ago

Hi @matthewdbell it would be great if you can provide a stackblitz to demonstrate the issue https://stackblitz.com/edit/ngx-gallery

matthewdbell commented 3 years ago

Thanks for your quick response

https://stackblitz.com/edit/ngx-gallery-dnp14w

Its pretty much my exact code (but simplified)

So the issue is that when clicking on the gallery - it only ever loads the 3rd (or last) gallery into the lightbox

Interestingly it actually works better on a live implementation http://staging.zanzibariv2.easyota.com/search/c8074674-d3ba-49d2-8a2e-08d8d312fa83 ..... It loads the correct gallery into the lightbox but looking in the console getting Maximum Call Stack Exceeded errors and functionally, if you keep clicking on the lightbox, it opens more and more and then you have to close them all

Thanks Matt

On Wed, 17 Feb 2021 at 02:11, Murhaf Sousli notifications@github.com wrote:

Hi @matthewdbell https://github.com/matthewdbell it would be great if you can provide a stackblitz to demonstrate the issue https://stackblitz.com/edit/ngx-gallery

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/MurhafSousli/ngx-gallery/issues/379#issuecomment-780224246, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKLS24LP3SSFOD55HOBKDDS7MJTDANCNFSM4XXE2ZVA .

MurhafSousli commented 3 years ago

There is something wrong in the binding, look at the value you pass to gallerize

Screen Shot 2021-02-17 at 17 43 32

matthewdbell commented 3 years ago

Hi,

Thanks - yes this was just a guess - I knew it was wrong - but don't know what is correct!

in your docs for using gallerize with gallery it just says do this:

i.e. without any binding to gallerize - but this doesn't work for multiple

How should I pass the ID to gallerize?

Please could you give me an example?

Thanks Matt

On Wed, 17 Feb 2021 at 17:44, Murhaf Sousli notifications@github.com wrote:

There is something wrong in the binding, look at the value you pass to gallerize

[image: Screen Shot 2021-02-17 at 17 43 32] https://user-images.githubusercontent.com/8130692/108236870-a92f5400-7147-11eb-9874-11cb3bb5e0fd.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/MurhafSousli/ngx-gallery/issues/379#issuecomment-780689808, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKLS25KQLIT7VEVVEBOPD3S7PW7JANCNFSM4XXE2ZVA .

MurhafSousli commented 3 years ago

@matthewdbell The [gallerize] directive should NOT have the same gallery id!

It will set the lightbox gallery id, which is a completely different gallery instance.

<gallery [id]="'gallery-' + galleryId" [gallerize]="'gallerize-' + galleryId"></gallery>

here is a fixed stackblitz

MurhafSousli / ngx-gallery

Multiple gallery with gallerize on same page #379