• 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 ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Bear Bibeault
  • Tim Cooke
  • Junilu Lacar
Sheriffs:
  • Paul Clapham
  • Devaka Cooray
  • Knute Snortum
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Frits Walraven
Bartenders:
  • Carey Brown
  • salvin francis
  • Claude Moore

Multiple modals - one image gallery?  RSS feed

 
Greenhorn
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">
</button>

<!-- 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>
</div>

</div>
 
Ranch Hand
Posts: 35
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
MouseOver Thumbnail to Larger

 
Barton Lewis
Greenhorn
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.

 
Whatever you say buddy! And I believe this tiny ad too:
ScroogeXHTML - the small and fast RTF to HTML converter library
https://coderanch.com/t/707504/ScroogeXHTML-RTF-HTML-XHTML-converter
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!