Bild von einem Bild in einer Diashow abrufen

Question

Ich habe mich heute viel umgesehen und ein paar Stunden damit verbracht, etwas zu erledigen. Für einen Kunden erstelle ich eine Diashow mit einem Leuchtkasten, wenn ich auf ein Bild klicke. Die Slideshow und Lightbox funktionieren beide, aber ich bekomme noch nicht das richtige Bild im Leuchtkasten.

Dies ist der Code, der die Diashow lädt. Wenn Sie auf ein Bild klicken, wird der Leuchtkasten geöffnet. (Die Bilder für die Diashow durch ein PHP-Skript geladen werden und verwandelte sich in ein Javascript-Array)

<script type="text/javascript"> 

var curimg=0; 
function rotateimages(){ 
document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]); 
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0; 
} 

window.onload = function(){ 
setInterval("rotateimages()", 1000); 
} 
</script> 
<div style="width: 170px; height: 160px"> 
<a href = "javascript:void(0)" onclick =   "document.getElementById('light').style.display='block';document.getElementById('fade').style. display='block'"> 
<img id="slideshow" src="" /> 
</a> 
<div id="light" class="white_content"> 
<img id="lightImg" src="" /> 
<script> 
var image = document.getElementById("slideshow").src; 
document.getElementById("lightImg").setAttribute("src", image); 
</script> 

ich jetzt versuchen, eine Variable erstellen namens „Bild“ und lassen dies die src des aktuellen Bildes in die enthalten Diashow. Also kann ich das auf das Bild im Leuchtkasten laden.

Hoffentlich kann mir jemand ein paar nützliche Tipps geben. Ich bin ziemlich neu in der Javascript-Sprache.

Das Skript für die Diashow kam aus: http://www.javascriptkit.com/javatutors/externalphp2.shtml

Grüße Koen.

Answer 1

In diesen Tagen gibt es wirklich keine Entschuldigung für die Verwendung von aufdringlich Javascript (Zeug in Ihrem HTML-Attribute, idealerweise sollte es in einer externen Datei sein. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript).

Ich habe dir den Gefallen getan, deinen Code ein bisschen aufzuräumen und änderst ihn dort, wo du scheinbar falsch liegst. Wie DotNetter bereits darauf hingewiesen hat, wäre es in diesem Fall sinnvoll, jQuery zu verwenden, da es die Dinge wirklich vereinfacht. Ich gehe jedoch davon aus, dass Sie es aus irgendeinem Grund in plain js wollen. Im Folgenden finden Sie eine Vereinfachung des Codes, den Sie mit der korrekten Änderung veröffentlicht haben. Vor

<style type="text/css"> 
    .wrapper { 
     width: 170px; 
     height: 160px; 
    } 
</style> 

<script type="text/javascript"> 
    var curimg=0; 
    function rotateimages(){ 
     document.getElementById("slideshow").setAttribute("src", "images/" + galleryarray[curimg]); 
     curimg=(curimg<galleryarray.length-1)? curimg+1 : 0; 
    } 

    window.onload = function(){ 
     setInterval("rotateimages()", 1000); 

     document.getElementById("slideshow").onclick = function() { 
      var imageSrc = document.getElementById("slideshow").src; 
      document.getElementById("lightImg").setAttribute("src", imageSrc); 
      document.getElementById('light').style.display = 'block'; 
      document.getElementById('fade').style.display = 'block'; 
     } 
    } 
</script> 

<div class='wrapper'> 
    <img id="slideshow" src="" /> 
    <div id="light" class="white_content"> 
     <img id="lightImg" src="" /> 
    </div> 
</div> 

wurden erhalten Sie die src des aktuellen Bildes, wenn die Seite geladen wird, müssen Sie die src des Bildes bekommen, wenn der Benutzer klickt auf die