Barton Lewis

Greenhorn
+ Follow
since Apr 24, 2018
Cows and Likes
Cows
Total received
0
In last 30 days
0
Total given
0
Likes
Total received
0
Received in last 30 days
0
Total given
0
Given in last 30 days
0
Forums and Threads
Scavenger Hunt
expand Ranch Hand Scavenger Hunt
expand Greenhorn Scavenger Hunt

Recent posts by Barton Lewis

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 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>
1 month ago
I found code for a manual slideshow using thumbnails below the full image.  However I am unable to modify the size of the container for some of them.  The portrait format images have a container that is equal in width to the landscape images and as a result there is empty space for those (portrait) thumbnails.  Is there a way to make the container equal to the image itself?


Thank you.  I see that the version of the page I posted uses a height: 70% as opposed to width: 60% definition, as referenced in my post.  Sorry for the error/confusion.  But the problem is the same:  the panorama spills over the edges of the screen while displaying correctly for the other 2 images.  So I need something like height: 50% for the panorama - just not sure how to write the code to get 2 different classes of images.
Of course, silly me, not paying close attention.  Thank you.  I will repost to the correct forum.
Thank you.  Here it is.  It's mich longer than the 20 lines of code you recommend in the FAQ, but I stripped out everything that I thought was not essential to the problem and left what I thought was in.  This is my first post.  Trial by error.

I found code at w3schools for opening thumbnails into full-sized modal images that works really well, except that some of the images are very wide panoramas, and the definition I am using for the modal (60% width) does not work well for these wider images, which are very short as a result.  The other images fill the screen vertically at 60% width, but not the panoramas.  How can I create a different definition for the panoramas?  I wanted to post my code but I don't understand the directions for doing so and I am afraid of doing it incorrectly.  I think my question is virtually meaningless without the code.  Thanks for any directions you can provide.  Is there a video tutorial anywhere on how to post your code to this site?