Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Override 'next' and 'previous' behavior? #264

Open
yarozar opened this issue Sep 14, 2023 · 4 comments
Open

Override 'next' and 'previous' behavior? #264

yarozar opened this issue Sep 14, 2023 · 4 comments
Assignees
Labels

Comments

@yarozar
Copy link

yarozar commented Sep 14, 2023

Can I override 'next' and 'previous' buttons in Modal Gallery?

What I want is to be able to reload Images[] upon clicking 'next' on last image or 'prev' on first - i.e. implement sort of pagination for the gallery and load images in chunks.

@Ks89
Copy link
Owner

Ks89 commented Sep 15, 2023

Hi @yarozar,
you cannot override that functions, but you can listen for events.
In this repo there are official example projects. You can listen for events in this way HERE and implement your logic. Since you pass the array of images, you know the length, then in the event listener you can implement your logic.
However, your scenario is more complex. I never tried to fully replace the image array in this event, but only removing/adding images using the before/after hooks of upper buttons.

This could be an interesting feature for future releases and if someone want to contribute with a PR.

Why do you need this? The library already load images only when needed, storing in array of Image objects only URLs.

@Ks89 Ks89 self-assigned this Sep 15, 2023
@Ks89 Ks89 added the question label Sep 15, 2023
@yarozar
Copy link
Author

yarozar commented Sep 15, 2023

@Ks89 , yes, I already did it that way. Though I have left it buggy in case there are 2 or 1 images only - in that case I was unable to identify if I should go forward into next chunk of images or backwards into previous. :)

BTW from this comes another question/feature request which maybe more straightforward and easier to implement - would be useful to get more detailed information about user action inside ImageModalEvent.action - i.e. was it mouse click on right arrow navigation icon OR left arrow keyboard click, etc.

I have big gallery built on my own, with thumbnails and pagination. Modal Gallery being triggered when user clicks on thumbnail and in that case I populate it with current chunk of images. I made it 'infinite' scroll, when user reaches last image in Modal Gallery - I se a flag like isPrevImgLast=true, if next show$ is first image - then I check for isPrevImgLast and if all true - reload gallery with next chunk of images. Same for flow first image -> last image in opposite direction.

@Ks89
Copy link
Owner

Ks89 commented Sep 21, 2023

I'm sorry for the huge delay, but I'am really busy this week.
I'll try to read and answer and your issues next week.

@Ks89
Copy link
Owner

Ks89 commented Sep 25, 2023

would be useful to get more detailed information about user action inside ImageModalEvent.action

@yarozar totally agree with you about this. This could be interesting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants