2

私は今日ずっと周りを見回していて、何かを成し遂げるために数時間を費やしています。クライアントの場合、画像をクリックするとライトボックス付きのスライドショーを作成しています。スライドショーとライトボックスはどちらも機能しますが、ライトボックスに正しい画像が表示されません。

これは、スライドショーをロードし、画像をクリックするとライトボックスを開くコードです。（スライドショーの画像はphpスクリプトによって読み込まれ、Javascript配列に変換されます）

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

ここで、「image」という名前の変数を作成して、スライドショーの現在の画像のsrcをこれに含めるようにします。これをライトボックスの画像に読み込むことができます。

うまくいけば、誰かが私にいくつかの役立つヒントを与えることができます。私はJavascript言語でかなり新しいです。

スライドショーのスクリプトは、http ：//www.javascriptkit.com/javatutors/externalphp2.shtmlから取得されました。

よろしくKoen。

4

1 に答える 1

1

最近では、目障りなJavascriptを使用する言い訳はありません（HTML属性内のもの、理想的には外部ファイルにある必要があります。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を取得していましたが、ユーザーがクリックしたときに画像のsrcを取得する必要があります。

于 2012-04-10T18:13:30.953 に答える