bartonlewis Posted May 4, 2019 Share Posted May 4, 2019 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 More sharing options...
dsonesuk Posted May 4, 2019 Share Posted May 4, 2019 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. Link to comment Share on other sites More sharing options...
bartonlewis Posted May 4, 2019 Author Share Posted May 4, 2019 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 More sharing options...
bartonlewis Posted May 4, 2019 Author Share Posted May 4, 2019 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">×</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 More sharing options...
bartonlewis Posted May 5, 2019 Author Share Posted May 5, 2019 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 More sharing options...
dsonesuk Posted May 5, 2019 Share Posted May 5, 2019 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 More sharing options...
bartonlewis Posted May 5, 2019 Author Share Posted May 5, 2019 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 More sharing options...
dsonesuk Posted May 5, 2019 Share Posted May 5, 2019 It is time you to learn the concept through javascript tutorials then, this is really basic javascript. https://www.w3schools.com/jsref/jsref_replace.asp Link to comment Share on other sites More sharing options...
bartonlewis Posted May 5, 2019 Author Share Posted May 5, 2019 I really appreciate it. I'll be better off for figuring it out myself - that's how you really learn. Link to comment Share on other sites More sharing options...
bartonlewis Posted May 5, 2019 Author Share Posted May 5, 2019 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 More sharing options...
dsonesuk Posted May 5, 2019 Share Posted May 5, 2019 (edited) 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 May 5, 2019 by dsonesuk Link to comment Share on other sites More sharing options...
bartonlewis Posted May 5, 2019 Author Share Posted May 5, 2019 (edited) 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 May 5, 2019 by bartonlewis clarification Link to comment Share on other sites More sharing options...
dsonesuk Posted May 6, 2019 Share Posted May 6, 2019 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. Link to comment Share on other sites More sharing options...
bartonlewis Posted May 6, 2019 Author Share Posted May 6, 2019 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 More sharing options...
dsonesuk Posted May 6, 2019 Share Posted May 6, 2019 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. Link to comment Share on other sites More sharing options...
bartonlewis Posted May 6, 2019 Author Share Posted May 6, 2019 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 More sharing options...
dsonesuk Posted May 7, 2019 Share Posted May 7, 2019 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now