1

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

去这里例如

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

1 回答 1

0

这永远不会被调用$(".navigation").click(function() {您可以通过添加手表来使用 firebug 进行调试。只是建议您以防万一您不知道。

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

此外，最好只使用轮播脚本。

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

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

于 2013-02-06T01:33:47.970 回答