How do I zoom, navigate like previous and next in an image gallery when an image is clicked? | SoloLearn: Learn to code for FREE!

+2

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

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

4/7/2020 4:50:01 AM

Fasasi Sherif

7 Answers

New Answer

+4

JavaScript https://code.sololearn.com/Wl23AIEG6SuZ/?ref=app Bootstrap https://code.sololearn.com/WK28NkomqzhU/?ref=app Tailwind https://code.sololearn.com/Wr8nSyZlk7Um/?ref=app

+3

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%

+3

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

+2

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

0

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.

0

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

0

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