Turn thumbnail link to carousel and set as active.

Question

Hi,I use bootstrap 4I want to create a responsive gallery with all the thumbnail on one page.I know how to problematically create both the carousel and the thumbnails.When the user clicks a thumbnail it will turn to a carouse with the selected image as active.I believe this is best achieved with js.1. How do I show the carousel on top of the thumbnails once the use clicks a thumbnail?2. How do I set this as active (i know how to find the link to the image) 3. How do I remove the carousel, when the user clicks outside the carousel and leave the thumbnails.A link to and existing code/gallery would be good as well - i'll extract the code from there.Thank you,

Nancy OShea · Accepted Answer

You can combine the Carousel component with the Modal window to build a photo gallery. I wrote this tutorial a while back with Bootstrap 3x but you can also do it with version 4.

Bootstrap Modal + Carousel Gallery - https://alt-web.com/

karpiyon · Answer

This is the link:DnD-Production i changed the transition to fade yet you can see that transition for different size images does not look good.Perhaps I should set the background to transparent? should I override the css or is there another way?The gallery is not optimized the thumbs take too long to load and there are too many images.any suggestion for improvement are welcome

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded