在Lightbox中动态更改查看的图像

Dynamically Changing Image Viewed in Lightbox

本文关键字：图像 Lightbox 动态      更新时间：2023-09-26

我有一个缩略图库，当你点击它们时，它们会显示更大的版本。我希望单击时在灯箱中显示较大的图像。页面加载时，显示的初始图像运行良好。但是，当我单击其中一个缩略图时，当它显示为较大的图像时，lightbox只显示原始图像。是我遗漏了一些代码，还是这可能是灯箱的限制？

以为例

<a href="/uploads/portfolio/fullsize/bigimage.jpg" id="bigImgLink" rel="lightbox"><img src="/uploads/portfolio/fullsize/bigimage.jpg" alt="" class="fullsize" id="bigImg" /></a>

Javascript 的代码段

imagearray = new Array('CapitalHealth_01alt_WEB-2225.jpg','CapitalHealth_16_WEB-1311.jpg','CapitalHealth_18retouched_WEB-6133.jpg','CapitalHealth_09_retouched_WEB-6020.jpg','CapitalHealth_13_WEB-8373.jpg');
currentimage = 0;
totalimages= imagearray.length;
        $(".navigation").click(function() {
                            if ( $(this).attr('id') == 'previous-image' ) {
                                currentimage = (currentimage > 0) ? currentimage - 1 : totalimages - 1;
                            } else {
                                currentimage = (currentimage < (totalimages - 1)) ? currentimage + 1 : 0;
                            }
                            $("img#bigImg").attr('src',"/uploads/portfolio/fullsize/" + imagearray[currentimage]);
                            $("a#bigImgLink").attr('href',"/uploads/portfolio/fullsize/" + imagearray[currentimage]);
    });

这永远不会被称为$(".navigation").click(function() {。您可以通过添加一个手表来使用firebug调试它。只是建议你这样做，以防你不知道。

将其更改为正确的选择器，它就会工作。类似$(".thumbnail").click(function() {

此外，最好只使用旋转木马脚本。

http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

这个很不错http://www.agilecarousel.com/flavor_2.htm

相关文章：