Zurück und vorwärts Tasten auf einem Modal über eine Bildergalerie (durchblättern)?

Question

Ich habe eine Bildergalerie, die CSS und Javascript verwendet, um das Bild in einem modalen über die Galerie basierend auf einem Tutorial von w3schools.com zu öffnen. Ich hatte ursprünglich Probleme damit, auf ein externes Bild zu zeigen, aber jemand hier konnte mir zeigen, wie ich das beheben kann. Nun möchte ich Vorwärts- und Rückwärts-Buttons machen, damit der Benutzer sich durch die Galerie bewegen kann, ohne das Modal jedes Mal zu schließen. Ich habe es geschafft, dass die Pfeiltasten im Modul erscheinen (und Größe und Bewegung und Erscheinen), wie ich es möchte. Leider konnte ich die Schaltflächen nicht erreichen, um das Bild und den Text in der Mitte zu ändern. Das Beste, was ich tun konnte, war es, dass es aufhört, das Modal zu zerstören und zumindest auf dem gleichen Bild und Text zu bleiben, wenn man darauf klickt. Hier ist mein Code soweit.

<!-- 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> 

Scheint, wie lange und komplizierte Verfahren zu schaffen, was ich möchte, aber ich bin neu in Javascript (gerade begonnen heute). Irgendwelche Gedanken würden geschätzt werden.

Answer 1

Ihre Frage sieht eher wie "Ist jemand hier cool genug, um etwas für mich zu programmieren?" nicht wahr?

Nun, ich habe es als Spaß Übung zu vervollständigen, da Rübe bereits viel zu Ihrer vorherigen Frage beigetragen hat. Und ich dachte, es wäre traurig, jemanden an seinem ersten Tag in Javascript nicht zu ermutigen.
Aber hey! Ich bin mir nicht sicher, dass du in Zukunft so viele Chancen haben wirst!
;
;
Jetzt im Grunde, was dieser Code ist, um allen Miniaturansichten eine Onclick-Funktion zuzuordnen, um das entsprechende größere Bild in Ihrem Modal anzuzeigen. Es öffnet auch Ihr Modal beim ersten Klick auf die Miniaturansicht.
Dies ist der Teil Rübe tat.
Beachten Sie, dass diese Miniaturbilder nun die Klasse "GalleryImg" haben müssen.
Ich habe dies der Version der Rübe hinzugefügt, um sicherzustellen, dass die Vor- und Zurück-Schaltflächen nicht in der Schleife enthalten sind, da es sich auch um Bilder handelt.

Für die Vor- und Zurück-Tasten habe ich einen versteckten Eingang hinzugefügt, den ich als Speichersteckplatz benutze, der das im Modal angezeigte Bild enthält.
Beachten Sie, dass alle Thumbnails eine ID haben müssen, die "nullbasiert" ist: Die erste Thumbnail ID ist img-0.
Ausgehend von diesen Informationen können Sie mit den Vor- und Zurück-Tasten die ID-Nummer des Bildes, das Sie anzeigen möchten, abhängig von der Schaltfläche, auf die Sie klicken, abziehen.

Ho ... Ich habe auch Ihre nächste Frage erwartet, die sicher wäre, vom ersten Bild neu zu starten, wenn das letzte erreicht wurde und umgekehrt.
Versuchen Sie herauszufinden, welche Linien den Trick machen! ;)

Hier ist der Code:

<!-- 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-05-03)

auf "Reverse" die Ide Nummerierung, wie weiter unten in den Kommentaren gefragt , um so zu sein:

<!-- 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> 

Eine umgekehrte Anordnung der i mages elements muss erstellt werden ... Da die ID-Nummern mit der Position des Zielbildes in einem Array von Elementen verknüpft sind.
Und dann kehren Sie zur Logik der Vorwärts- und Zurück-Tasten um.

Mit diesem Code:

// 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(); 
}