Jump to content
bartonlewis

Multiple modal boxes in one image gallery – is it possible?

Recommended Posts

I want to create an image gallery with a button tag that contains thumbnails which when clicked on open a full-sized image with other content (buy button link, image title etc.).

I’m using the code here https://www.w3schools.com/howto/howto_css_modals.asp

The issue I’m having is that all images inside the button will open the 1st image loaded into the modal, and that image only.  Is there a way to associate different thumbnails with their corresponding full-size image so that the correct image opens in the modal when the corresponding thumbnail is clicked on?

Thank you.

Share this post


Link to post
Share on other sites

If you add '_thumb' to the end of thumb nail image, which when removed will be the filename of the larger image. All you have to do is remove ' _thumb' before using it for the img tag source of larger image in modal.

Share this post


Link to post
Share on other sites

Thanks.  So I currently have 2 versions of the image:  1 as thumb (300px x 230px) which is in the button tag and another one (1958px x 1500px) which is inside the "modal-content" div.  But I take it you're saying do something else:  have only 1 version (1958x1500) and by adding "_thumb" to the one inside the button it appears as a thumbnail.  Is that correct?  If so, how is it resized smaller and how is the "_thumb" "removed"?  

Share this post


Link to post
Share on other sites

dsonesuk, are you saying have 2 versions of the same image, one small with "_thumb" in the filename in the button tag and one large without the "_thumb" in the filename in the modal div?  Because that's what I currently have.  That opens the modal correctly but the problem is that the 2nd thumb opens the 1st image in the modal - how do you have multiple thumbs and larger versions inside the modal that correspond to each other when opened?

In the code below the 2nd thumb opens the 1st modal image.

 

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

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
      <div><img src="img_150-035_1500.jpg"></div>
      <div><img src="img_150-368_1500.jpg"></div>
    </div>

</div>

 

 

 

Share this post


Link to post
Share on other sites

Correction:  what actually happens is that both images open in the modal one on top of the other.  What I want is a situation where only one images opens at a time, when the corresponding thumb is clicked on.

Share this post


Link to post
Share on other sites

I dont know what you doing? You are going backwards? With the code i gave you before. The code before had many images that opened a single modal image  whose  src was changed to the image you clicked. All you have to do is use the same code and use varofthumb.replace(' _thumb ','') to replace ' _thumb ' to empty string that will give src to large image file.

Share this post


Link to post
Share on other sites

OK, I don't know javascript so these concepts are unfamiliar to me.  I probably can't put into practice what you are saying without the code being written outt  If you are able to substitute in the code I provided above what is needed, I would be grateful.  It would create my gallery and I would learn something.  If not, thank you anyway.  It's more than I had before.

Share this post


Link to post
Share on other sites

I really appreciate it.  I'll be better off for figuring it out myself - that's how you really learn.  

Share this post


Link to post
Share on other sites

So I looked at the link you provided and also the linked Javascript String Reference page.  Both show how you replace a word with another word.  But how do you replace an object with another object, in this case an image, using the syntax they show:  "var res = str.replace(/blue/g, "red");"

If there is a fuller tutorial on this, I would like to see it, but didn't find one at w3schools.

Share this post


Link to post
Share on other sites

You DON'T replace image object, just the src attribute string value from thumb nail by removing '_thumb' which will then point to the larger image.

The code i supplied last time copied  the src and alt value to the modal img tag with id ref.

You are doing the same but removing  '_thumb' before setting the modal image src attribute.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

this is what I did.  I copied your code above (the 3rd block of js) exactly but I believe there may be spaces that shouldn't be there as well as possibly a double quote which copies as 2 single quotes.  As a double quote, it needs another somewhere but I don't know where.

So is there nothing in the modal itself as far as the actual image is concerned?  The javascript is pulling it into the modal?  As long as the images are on your server (or using my code editor's Live Update in the same folder on my hard drive)?   As it is, the 2 larger images are in the same folder (named "img_150-035_1500.jpg" and "img_150-045_1500.jpg") and as things stand, the modals are opening without an image in them.

I don't get how the images are pulled in as larger files into their respective divs (with unique names and buy button links). 
 

<!-- 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>some text and a buy button for this image</div>
      <div>some text and a buy button for this image</div>
    </div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// replace the thumb with larger image
var res = varofthumb.replace(' _thumb ','');
    
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

 

Edited by bartonlewis
clarification

Share this post


Link to post
Share on other sites

Thats not the code i was referring to, the code I was referring  to is the looping through image class names to apply onclick event to copy that class image src to the modal image src.

Share this post


Link to post
Share on other sites

Okay.  Well I don't think that code is included in the link you provided here https://www.w3schools.com/jsref/jsref_replace.asp

But I may be wrong and just don't know enough about it.  

Since I don't know js, a general description of what I need to do to achieve my goal is not going to be enough to get the job done.  I'll continue looking for tutorials or other guides online to help me figure it out.  Thank you.

Share this post


Link to post
Share on other sites

The code is from a previous topic of yours? You should have access to it as it is one of your topics, unless you expected me to spoon fed you, which is not going to happen.

Share this post


Link to post
Share on other sites

Any code related to this topic is in this string.  You initially advised me to add "_thumb" to my image, and then remove it.  You then provided the link which is cited above.  As far as I know, you did not provide a link for "looping through image class names"  which you refer to above.  I never asked to be spoon fed.  In fact, I stated my intent to do my own research and seek clarification elsewhere. 

Share this post


Link to post
Share on other sites

Which code that i provided that was no more than a week ago in a topic of yours involved looping through class names of images to apply the src attribute of img tag clicked to the modal img src.  I referred to that several  times, stating you was going backwards to the original code. If you used thumbnail images with '_thumb' in that code you would have to use the same principle  of removing '_thumb' to show the larger image which are ttying to do here.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...