Image Zoom - Hover or Click - inside lightbox?
Posted: Sun May 29, 2022 7:50 pm
I have an image that is 2358px X 1561px. This image (or at least a thumbnail) will be inside a layout grid. I am using a lightbox | fancybox to open the image currently BUT I would like to be able to 1) open the image, lightbox or otherwise and 2) allow the user to either click or use the mouse scroll wheel to grow the image.
By way of explanation, this image is a class photo with multiple individuals. I would like to have the user be able to open the image and enlarge it to the point where they will get (as close as possible) to the individual photo in the group.
I've seen Wiki images that when clicked, open in a full size window with a magnifying glass with + or - that allows the user to zoom in 2 or 3 times. I also imagine a "photoshop" type situation where simply using the mouse wheel grows or shrinks the image on the screen as needed. Also found something on github called "vanilla-js-wheel-zoom" which is almost perfect but I have no idea how to implement such a thing. Even Flikr uses something that allows a 1x or 2x zoom with a click.
Suggestions, direction, existing extensions, any help appreciated.
By way of explanation, this image is a class photo with multiple individuals. I would like to have the user be able to open the image and enlarge it to the point where they will get (as close as possible) to the individual photo in the group.
I've seen Wiki images that when clicked, open in a full size window with a magnifying glass with + or - that allows the user to zoom in 2 or 3 times. I also imagine a "photoshop" type situation where simply using the mouse wheel grows or shrinks the image on the screen as needed. Also found something on github called "vanilla-js-wheel-zoom" which is almost perfect but I have no idea how to implement such a thing. Even Flikr uses something that allows a 1x or 2x zoom with a click.
Suggestions, direction, existing extensions, any help appreciated.