0

シャドウボックスが統合されたシンプルな画像ギャラリーを使用しています。これが通常のスクリプトです。

 <div id="gallery">
            <div id="panel">
            <p><a id="showimg" href="images/image_01.jpg" rel="shadowbox">
                <img id="largeImage" src="images/image_01.jpg" />
                </a></p>
            <div id="description">1st image description</div>
            </div>

            <div id="thumbs">
                <img src="images/image_01.jpg" alt="1st image description" />
                <img src="images/image_02.jpg" alt="2nd image description" />
                <img src="images/image_03.jpg" alt="3rd image description" />
                <img src="images/image_04.jpg" alt="4th image description" />
                <img src="images/image_05.jpg" alt="5th image description" />
            </div>
        </div>

        </div>

        <script>

        $('#thumbs').delegate('img','click', function(){
            $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
            $('#description').html($(this).attr('alt'));
        });

        </script>

大きな画像の URL が変更されていないことに気付いたので、スクリプトに別の行を追加して、マウスが画像を変更するたびに href を変更しました。

<script>

$('#thumbs').delegate('img','click', function(){
    $('#largeImage').attr('src',$(this).attr('src'));
    $('#description').html($(this).attr('alt'));
    $('#showimg').attr('href', $(this).attr('src'));
});

</script>

それが正しいかどうかはわかりませんが、マウス ホバーを画像に渡すと、URL は常に異なりますが、SHADOWBOX は常に同じ画像 (最初の画像) を読み込みます。

少し助けてください!

4

1 に答える 1