• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
  • Campbell Ritchie
  • Paul Clapham
  • Jeanne Boyarsky
  • Junilu Lacar
  • Henry Wong
  • Ron McLeod
  • Devaka Cooray
  • Tim Cooke
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Frits Walraven
  • Tim Holloway
  • Carey Brown
  • Piet Souris
  • salvin francis
  • fred rosenberger

Multiple modals - one image gallery?

Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am using the code at https://www.w3schools.com/howto/howto_css_modals.asp
to create an image gallery using modals.  I am not sure how to create thumbnails inside the button that will open the corresponding image only, in the modal.  In the code below, the thumbs, when clicked on, open both of the images inside the modal.  Is it possible to just have the one image that corresponds to the thumb being clicked on open?   If so, how?  Thank you.

<!-- Trigger/Open The Modal -->
<button id="myBtn">
<img src="img_150-035_1500_thumb.jpg"><img src="img_150-045_1500_thumb.jpg">

<!-- The Modal -->
<div id="myModal" class="modal">

 <!-- Modal content -->
 <div class="modal-content">
   <span class="close">×</span>
 <div><img src="img_150-035_1500.jpg"></div>
 <div><img src="img_150-045_1500.jpg"></div>

Ranch Hand
Posts: 54
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
MouseOver Thumbnail to Larger

Barton Lewis
Posts: 9
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks.  I should have mentioned that I want the thumb to open in a modal as I want to include other content - a buy button link and title - along with the image when fully opened.  I was told I could use the JavaScript String replace() Method to open thumbs inside a button which would be replaced by a larger version in the modal div, but I don't know how to do this.

I'm pasting the entire code as I currently have it but the button opens all images inside the modal when clicking on a single thumb.  I was told "All you have to do is use varofthumb.replace(' _thumb ','') to replace ' _thumb ' to empty string that will give src to large image file."  I tried to figure this out but I don't know enough about javascript to make it work.  Any assistance you can provide is greatly appreciated.

We don't have time to be charming! Quick, read this tiny ad:
Devious Experiments for a Truly Passive Greenhouse!
    Bookmark Topic Watch Topic
  • New Topic