This week's book giveaway is in the Beginning Java forum.
We're giving away four copies of Learn Java with Math: Using Fun Projects and Games and have Ron Dai on-line!
See this thread for details.
Win a copy of Learn Java with Math: Using Fun Projects and Games this week in the Beginning Java 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
  • Liutauras Vilda
  • Bear Bibeault
  • Junilu Lacar
  • Martin Vashko
Sheriffs:
  • Jeanne Boyarsky
  • Tim Cooke
  • Knute Snortum
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
Bartenders:
  • Scott Selikoff
  • salvin francis
  • Piet Souris

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.

 
I got this tall by not having enough crisco in my diet as a kid. This ad looks like it had plenty of shortening:
Java file APIs (DOC, XLS, PDF, and many more)
https://products.aspose.com/total/java
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!