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

New feature: full-screen on current image #258

Open
locinus opened this issue May 9, 2022 · 3 comments
Open

New feature: full-screen on current image #258

locinus opened this issue May 9, 2022 · 3 comments

Comments

@locinus
Copy link

locinus commented May 9, 2022

I'm submitting a...

[X] Feature request

Current behavior

In 9.0.0, there's only one possible action on click on the current picture in Modal mode: to navigate to the next picture.

Proposed behavior

We would like to suggest another outcome, allowing for the user to zoom in the current picture to view it in full-screen, before resuming their navigation.
The users would then be able to grab the pictures in details, if they have this need.

It's something that I will work on a fork, because it's a need I have to fulfill; but naturely, I suggest it to you, as if we can determine a common interest in this feature, I'll push a PR when implemented.

I already have quite a working solution:

  • new flag CurrentImageConfig::zoomOnClick to choose this behavior (even though an option to select the 'actionOnClick' would certainly be preferable)
  • a click on the currentImage makes it grow to its maximum size on the screen (respecting its ratio) while the other elements (top buttons, nav arrows, previews and image caption) disappear
  • another click on the zoomed-in currentImage makes it have its normal aspect again; all elements become visible again, allowing navigation (optionnaly, in this demo navigation by keyboard is still allowed when zoomed in)

image_zoom_demo

Don't hesitate to tell me your thoughts about it !

@Ks89
Copy link
Owner

Ks89 commented May 10, 2022

Very interesting.
Feel free to create a PR on develop branch.

Did you test your implementation also on mobile devices (android and iOS)?

@hetu06
Copy link

hetu06 commented May 25, 2022

// this.GalleryConfig = Object.assign({}, this.GalleryConfig, {
// layout: new AdvancedLayout(index, true)
// });

i got the error when i call AdvancedLayout when i open Image. can give me information where can use instead of this.

@Ks89
Copy link
Owner

Ks89 commented May 25, 2022

// this.GalleryConfig = Object.assign({}, this.GalleryConfig, {
// layout: new AdvancedLayout(index, true)
// });

i got the error when i call AdvancedLayout when i open Image. can give me information where can use instead of this.

This post is in the wrong issue.
If you have a specific request, please open a new issue filling the template with all information and, if possibile, a runnable example to reproduce the problem

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

No branches or pull requests

3 participants