イメージをスライドショーの画像から取得

Question

私は今日多くのことを見ていて、何かをやろうと数時間を費やしています。クライアントの場合は、イメージをクリックするとライトボックス付きのスライドショーを作成しています。スライドショーとライトボックスの両方が機能しますが、ライトボックスにはまだ正しいイメージが表示されません。

これはスライドショーを読み込むコードで、イメージをクリックするとライトボックスが開きます。 （スライドショーの画像は、PHPスクリプトによってロードされ、Javascript配列になってます）私は今、「画像」という名前の変数を作成しようと、これは、現在の画像のSRCを含ませ

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

スライドショー。だからライトボックスの画像にこれをロードすることができます。

うまくいけば、私にいくつかの役に立つヒントを与えてくれることを願っています。私はJavascript言語でかなり新しいです。 http://www.javascriptkit.com/javatutors/externalphp2.shtml

よろしく公園：

スライドショーのスクリプトがから来ました。

Answer 1

最近では目立たないJavascript（あなたのHTML属性内のStuff、理想的には外部ファイルにあるはずです。http://en.wikipedia.org/wiki/Unobtrusive_JavaScript）を使用する理由がありません。

私はあなたのコードを少しきれいにして、あなたが間違っているように見える場所に変更しました。 DotNetterが既に指摘しているように、この事例ではjQueryを使うのは賢明でしょう。しかし、私は何らかの理由でそれを単純なjsで望んでいると仮定します。以下は、あなたが正しい変更で投稿したコードの単純化です。

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

ページがロードされたときに、現在の画像のSRCを取得して、前に、ユーザーが作品