Search the Community
Showing results for tags 'modal image'.
Found 3 results
I want to create an image gallery with a button tag that contains thumbnails which when clicked on open a full-sized image with other content (buy button link, image title etc.). I’m using the code here https://www.w3schools.com/howto/howto_css_modals.asp The issue I’m having is that all images inside the button will open the 1st image loaded into the modal, and that image only. Is there a way to associate different thumbnails with their corresponding full-size image so that the correct image opens in the modal when the corresponding thumbnail is clicked on? Thank you.
I found code for displaying thumbnails that open as full size images at w3schools here: https://www.w3schools.com/howto/howto_css_modal_images.asp This works really well but I have one problem: Some of the images are really wide panoramas. If I give a width of 60% for the modal content then the regular sized images display well on the screen, taking up the full vertical space, but the panoramas - while occupying the same horizontal space - are very short. And if I define the width as 90%, then while the panoramas fit beautifully on the screen, the regular size images do not fit vertically. I would like to have 2 different definitions for the 2 classes of images so both can optimally display - filling the screen top to bottom for the regular images and side to side for the panoramas. Is there any way to do this? Thanks.