How do I zoom, navigate like previous and next in an image gallery when an image is clicked?

Question

Plz, I want to create an age gallery, such that when the image is clicked, it zooms out, it has to two buttons beside it. One on the left, and one on the right.
Those are the previous and next bottom.
I press outside the image, it goes back to it previous state.
I have already linked the first image to another. What I only put in the other page is a larger version of that image. So when I click it links me to that page.
And the user sees a larger version. And there are two butons, for previous and next.
But I don't want to create a page for every image.
It's going to be stressful.
But anyway I already did that.
I couldn't find an answer and it is very stressful.
Here's a link to .my repository on GitHub for what I did.
https://github.com/fasasisherif/30_DaysOf_Code_Day-06_Image_gallery

Answer 1

JavaScript

https://code.sololearn.com/Wl23AIEG6SuZ/?ref=app

Bootstrap

https://code.sololearn.com/WK28NkomqzhU/?ref=app

Tailwind

https://code.sololearn.com/Wr8nSyZlk7Um/?ref=app

Answer 2

For zooming out, you need a hidden container to control the size, and apply transform scale() on the image in the event listener with transform-origin 50% 50%

Answer 3

https://code.sololearn.com/W2jUKKuZj09A/?ref=app

Answer 4

https://code.sololearn.com/WV5yE2En8S84/?ref=app

Answer 5

Thanks Gordon.
I appreciate it.
What I want to do is similar to the tailwind carousel. Except that the images are not initially stacked together. And when I clicked it doesn't zoom out.

Answer 6

Thanks Gordon .
After zooming out, how do I return the image to its previous position?

Answer 7

Thanks visph.
I want all the images to be initially stacked as in my link. Then a click event can bring about those actions