Jump to content

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


bartonlewis
 Share

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.

Link to comment
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"?  

Link to comment
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>

 

 

 

Link to comment
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.

Link to comment
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.

Link to comment
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.

Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
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.

Link to comment
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. 

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...