Animale38 Animale38 - 7 months ago 28
Javascript Question

Use an external .jpg image in a gallery modal based on CSS & JavaScript?

First time post on here, so give it my best shot.

My goal is to change the image gallery on my website. Right now, when an image is clicked, it opens in a new tab. I want to, instead, have the image open on the same page over the gallery. To do this, I have referred to a tutorial at w3schools.com. I've implemented it on my site and it works well (on my PC, not live on the net yet). My issue is that it pulls the image for the overlay/modal from the thumbnail image. Because my thumbnail images are low quality, I would like the modal to pull .jpg from an external file. Is there a way to modify the code to do this? I tried searching on here for a solution and changing the code myself...no solution. Here's some of the code, pretty much straight from w3schools.com.

<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

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

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
modal.style.display = "none";
}

var images = document.getElementsByTagName('img');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;
for (i = 0; i < images.length; i++) {
images[i].onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.nextElementSibling.innerHTML;
}
}
</script>


If the code only needs a slight modification, then, that would be great. If it needs a complete overhaul to do what I would like it to, that's fine. I'll just scrap what I've changed on the site on my PC and look for a completely new solution. Here's the gallery on net I'm trying to change: mygallery.

Answer

Assuming that your thumbnails and large images reside in the same folder and share some sensible naming convention such as:

Thumbnail: img01.jpg
Large version: large-img01.jpg

You should be able to do something like this:

<div id="myModal" class="modal">
  <span class="close">x</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

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

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
    modal.style.display = "none";
}

var images = document.getElementsByTagName('img');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;
for (i = 0; i < images.length; i++) {
   images[i].onclick = function(){
       modal.style.display = "block";

       /* Get the src of the clicked image. */
       var src = this.src;

       /* Get the filename and extension of the image */
       var filename = src.substring(src.lastIndexOf('/')+1);

       /* Get the file path minus the filename */
       var filepath = src.substring(0, src.lastIndexOf('/')+1);

       /* reconstruct your file path appending "large-" to the filename */
       modalImg.src = filepath + 'large-' + filename;
       modalImg.alt = this.alt;
       captionText.innerHTML = this.nextElementSibling.innerHTML;
   }
}

Obviously this would need to be modified to accommodate your own naming convention.