Win a copy of Event Streams in Action this week in the Java in General forum!
  • 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
  • Devaka Cooray
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Bear Bibeault
Sheriffs:
  • Paul Clapham
  • Knute Snortum
  • Rob Spoor
Saloon Keepers:
  • Tim Moores
  • Ron McLeod
  • Piet Souris
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Tim Holloway
  • Frits Walraven
  • Ganesh Patekar

Multiple modals - one image gallery?

 
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: 38
  • 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.

 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!