Question

我有一个缩略图库，当您点击它们时会显示更大的版本。我希望点击时更大的图像出现在灯箱中。在页面加载时，显示的初始图像工作正常。但是，当我单击其中一个缩略图时，虽然它显示为较大的图像，但灯箱仅显示原始图像。我错过了一些代码，或者这是灯箱的可能限制吗？

Go here for example

<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]);
    });

Answer 1

这永远不会被调用$(".navigation").click(function() {您可以通过添加监视来使用firebug进行调试。如果您不知道，请提出建议。

将此更改为正确的选择器，它将起作用。像$(".thumbnail").click(function() {

这样的东西

也可以更好地使用轮播脚本。

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

这个非常好http://www.agilecarousel.com/flavor_2.htm

动态更改在灯箱中查看的图像

1 个答案: