Search the Community
Showing results for tags 'modal image'.
Found 3 results
-
Multiple modal boxes in one image gallery – is it possible?
bartonlewis posted a topic in JavaScript
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 opening thumbnails using modal images at w3schools here: https://www.w3schools.com/howto/howto_css_modal_images.asp This code works well for me except for one problem: while most of the images display well on screen defining a width of 60%, which enables the image to fill the screen top to bottom, some of the images are panoramas and this 60% width restriction creates very short images top to bottom. I would like a separate definition for the panoramas that enables them to fill 90% of the width of the screen. I am not an experienced javascript user so I don't know how to do this. Can anyone help? I have attached the file with html, css and js in it. Thank you. so.html
-
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.
