イメージギャラリーの上にあるモーダル上の前後のボタン（スクロールする）？

Question

私はw3schools.comのチュートリアルに基づいてギャラリー上のモーダルでイメージを開くためにCSSとJavascriptを使用するイメージギャラリーを持っています。私はもともと外部の画像を指している問題を持っていましたが、ここにいる誰かが私にそれを修正する方法を教えてくれました。今度は、ユーザーが毎回モーダルを閉じずにギャラリーを移動できるように、前方と後方のボタンを作っていきたいと思います。私は、矢印ボタンをモジュルに表示させ（そして、サイズと移動、表示）、私はどのようにしたいのか分かりました。残念ながら、私はボタンをイメージとテキストを途中で変更することができませんでした。私ができる最高のことは、モーダルをクラッシュさせずに、少なくともクリックしたときに同じ画像とテキストにとどまるようにすることでした。これまでのところ私のコードです。

<!-- The Modal --> 
    <div id="myModal" class="modal"> 
     <span class="close">×</span> 
     <div class="backButton" id="bckBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Back" style="width:100%; float:left"> 
    </div> 
     <img class="modal-content" id="img01"> 
     <div id="caption"></div> 
     <div class="forwardButton" id="fwdBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Forward" style="width:100%; float:right;"> 
    </div> 
    </div> 

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

var span = document.getElementsByClassName("close")[0]; 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

var backButton = document.getElementById('bckBtn'); 
var forwardButton = document.getElementById('fwdBtn'); 
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"; 
     var src = this.src; 
     var filename = src.substring(src.lastIndexOf('/')+1); 
     var filepath = src.substring(0, src.lastIndexOf('/')+1); 
     modalImg.src = filepath + 'large-' + filename; 
     modalImg.alt = this.alt; 
     captionText.innerHTML = this.nextElementSibling.innerHTML; 
    backButton.onclick = function() { 
     var filename = src.substring(src.lastIndexOf('/')+1); 
     var filepath = src.substring(0, src.lastIndexOf('/')+1); 
     modalImg.src = filepath + 'large-' + filename; 
     modalImg.alt = this.alt; 
     captionText.innerHTML = nextElementSibling.innerHTML; 
     } 
    forwardButton.onclick = function() { 
     var filename = src.substring(src.lastIndexOf('/')+1); 
     var filepath = src.substring(0, src.lastIndexOf('/')+1); 
     modalImg.src = filepath + 'large-' + filename; 
     modalImg.alt = this.alt; 
     captionText.innerHTML = nextElementSibling.innerHTML; 
     } 
    } 
} 

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

</script> 

私は（ちょうど今日始まっ）JavaScriptに新たなんだ、私が望むものを作るに長く複雑な方法のように思えるが、。いかなる考えも認められるだろう。

Answer 1

あなたの質問は、「私にとって何かをコーディングするのに十分なクールな人はいますか？ではない？

これまで、Turnipは以前の質問に多大な貢献をして以来、楽しい演習として取り上げました。そして、私はそれがJavascriptの最初の日で誰かを奨励しないことが悲しいと思った。
しかしねえ！私はあなたが将来大きなチャンスを得ることは確実ではありません！


基本的に、このコードでは、すべてのサムネイルにonclick関数を割り当てて、対応する大き​​な画像をモーダルに表示します。 また、最初のサムネイルクリックでモーダルを「開く」。
これはTurnipが行った部分です。
これらのサムネイル画像には、「GalleryImg」クラスが必要であることに注意してください。
Turnipのバージョンにこれを追加して、バックボタンとフォワードボタンをループに含めないようにしました。これは画像でもあるためです。

バックボタンとフォワードボタンのために、モーダルに表示された実際のイメージを保持するメモリスロットとして使用する隠れた入力を追加しました。
サムネイルのIDはすべて「ゼロベース」でなければなりません。最初のサムネイルIDはimg-0です。
この情報から始めて、あなたの前後のボタンは、あなたがクリックするボタンに応じて、表示したい画像のID番号を差し引くことができます。

Ho ...私はまた、あなたの次の質問を予期しました。これは、最後に達したときに最初のイメージから再起動していたはずです。逆もまた同様です。
トリックを行っている行を見つけようとしてください。 ; ）ここ

コードである：

<!-- The Modal --> 
<div id="myModal" class="modal"> 
    <span class="close">×</span> 
    <div class="backButton" id="bckBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Back" style="width:100%; float:left"></div> 
    <img class="modal-content" id="img01"> 
    <div id="caption"></div> 
    <div class="forwardButton" id="fwdBtn"><img src="../gallery_images/buttonPlaceHolder.png" alt="Forward" style="width:100%; float:right;"></div> 
    <input type="hidden" id="mem"> 
</div> 

<img class="GalleryImg" id="img-0" src="../path/to/image1" alt="alternate text 1"><div>caption text 1</div> 
<img class="GalleryImg" id="img-1" src="../path/to/image2" alt="alternate text 2"><div>caption text 2</div> 
<img class="GalleryImg" id="img-2" src="../path/to/image3" alt="alternate text 3"><div>caption text 3</div> 
<img class="GalleryImg" id="img-3" src="../path/to/image4" alt="alternate text 4"><div>caption text 4</div> 
<!-- and so on... --> 

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

var span = document.getElementsByClassName("close")[0]; 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

var backButton = document.getElementById('bckBtn'); 
var forwardButton = document.getElementById('fwdBtn'); 
var images = document.getElementsByClassName('GalleryImg'); 
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"; 
     var src = this.src; 
     var filename = src.substring(src.lastIndexOf('/')+1); 
     var filepath = src.substring(0, src.lastIndexOf('/')+1); 
     modalImg.src = filepath + 'large-' + filename; 
     modalImg.alt = this.alt; 
     captionText.innerHTML = this.nextElementSibling.innerHTML; 
     document.getElementById("mem").value=this.id; 
    } 
} 

backButton.onclick = function(){ 
    ImageId = document.getElementById("mem").value.split("-"); 
    PreviousImage = parseInt(ImageId[1])-1; 
    if(PreviousImage<0){PreviousImage=images.length-1;} 
    images[PreviousImage].click(); 
} 

forwardButton.onclick = function(){ 
    ImageId = document.getElementById("mem").value.split("-"); 
    NextImage = parseInt(ImageId[1])+1; 
    if(NextImage>=images.length-1){NextImage=0;} 
    images[NextImage].click(); 
} 
</script> 

EDIT（2016年5月3日）

"逆" には、以下のコメントで求めたように、ナンバリングIDSこのようになる：

<!-- Future images to be added here--> 
<img class="GalleryImg" id="img-3" src="../path/to/image4" alt="alternate text 4"><div>caption text 4</div> 
<img class="GalleryImg" id="img-2" src="../path/to/image3" alt="alternate text 3"><div>caption text 3</div> 
<img class="GalleryImg" id="img-1" src="../path/to/image2" alt="alternate text 2"><div>caption text 2</div> 
<img class="GalleryImg" id="img-0" src="../path/to/image1" alt="alternate text 1"><div>caption text 1</div> 

逆のi mages要素を作成する必要があります... id番号は要素の配列内のターゲットイメージの位置にリンクされているためです。
次に、前後のボタンのロジックを逆にします。このコード

用途：

// Create a "reversed" images array 
var imagesReversed = [];  
var i = images.length; 
while(i--){ 
    imagesReversed.push(images[i]); 
} 

// Adds 1 from the actual id to get the target image position in the reversed array. 
backButton.onclick = function(){ 
    ImageId = document.getElementById("mem").value.split("-"); 
    PreviousImage = parseInt(ImageId[1])+1; 
    if(PreviousImage>images.length-1){PreviousImage=0;} 
    imagesReversed[PreviousImage].click(); 
} 

// Substracts 1 from the actual id to get the target image position in the reversed array. 
forwardButton.onclick = function(){ 
    ImageId = document.getElementById("mem").value.split("-"); 
    NextImage = parseInt(ImageId[1])-1; 
    if(NextImage<0){NextImage=images.length-1;} 
    imagesReversed[NextImage].click(); 
}