Question

我正在使用一个集成了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>

我注意到大图像中的网址永远不会改变，因此我在脚本上添加了另一行，以便在鼠标对图像进行渐变时始终更改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总是加载相同的图像（第一个）。

请一点帮助！

Answer 1

尝试使用以下语法：

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'));

         });

Shadowbox不会加载当前URL

1 个答案: