CSS＆JavaScriptに基づくギャラリーモーダルで外部の.jpgイメージを使用しますか？

Question

初めての投稿ですので、ベストショットを付けてください。

私の目標は、自分のウェブサイト上の画像ギャラリーを変更することです。現在、画像がクリックされると、新しいタブで画像が開きます。代わりにギャラリーの同じページに画像を開いておきたい。これを行うために、私はw3schools.comでチュートリアルを参照しました。私は自分のサイトでそれを実装していますが、それはうまくいきます（私のPC上で、まだネット上には生きていません）。私の問題は、サムネイル画像からオーバーレイ/モーダルの画像を引っ張ることです。私のサムネイル画像は低品質なので、外部ファイルから.jpgを引き出すようにしたいと思います。これを行うコードを変更する方法はありますか？ここでは解決策を探してコードを変更してみました...解決策はありません。コードの一部は、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> 

コードにわずかな変更が必要な場合は、それが最適です。私が望むことをするために完全な見直しが必要な場合は、それは問題ありません。私は自分のPCのサイトで変更した内容を取り除き、まったく新しいソリューションを探します。変更しようとしているネット上のギャラリーはmygalleryです。

サムネイル：img01.jpg
大型バージョン：large-img01.jpg

あなたが好きな何かを行うことができるはず、あなたのサムネイルと大きな画像が同じフォルダに存在し、のようないくつかの賢明な命名規則を共有すると仮定すると

Answer 1

これは：

<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; 
    } 
} 

これは明らかに、独自の命名規則に合わせて変更する必要があります。