0

我正在使用一个集成了 shadowbox 的简单图片库。这是正常的脚本。

 <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

0

尝试使用以下语法：

html（将类放入列表中的每个图像）：

<div id="thumbs">
<img class="imglist" src="images/image_01_thumb.jpg" alt="1st image description" />
</div>

js：

$('.imglist').on('click','img', function(e){

e.stopPropagation(); or e.preventDefault();

       $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
            $('#description').html($(this).attr('alt'));
            $('#showimg').attr('href', $(this).attr('src').replace('thumb', 'large'));

         });
于 2013-09-15T23:51:13.130 回答