0

我有一个使用 jQuery 和 php 脚本的无限滚动画廊项目，该脚本从目录中读取图片并将它们发布在无尽的页面上。我为以前使用过的灯箱添加了照片扩展，效果非常好。我试图将两者混合在一起并创建一个无限滚动的灯箱画廊，但它们不能正常工作。这些是单独工作的，但每次我将它们一起实现时，我的网页都会盯着我看，什么也不做。也许我错过了一些东西，请帮助我。

我正在使用的画廊基地：http: //net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-infinite-scroll-web-gallery/

灯箱基础： http ://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

4

1 回答 1

0

对象上灯箱 CSS 的类调用不正确。我没有在 jQuery 中添加类，所以图像只更新图像，而不是 CSS 功能。

示例：我做了什么：

var j = 0;
        for(i=0; i<files.length; i++){
            if(files[i] != ""){
                document.getElementById("container").innerHTML += '<a href="img/'+files[i]+'"><img src="thumb/'+files[i]+'" /></a>';
                j++;
                
                if(j == 3 || j == 6)
                    document.getElementById("container").innerHTML += '';
                else if(j == 9){
                    document.getElementById("container").innerHTML += '<p>'+(n-1)+" Images Displayed | <a href='#header'>top</a></p><hr />";
                    j = 0;
                }
            }
        }

我应该做的（<a class="lightbox" href="img/'）：

var j = 0;
        for(i=0; i<files.length; i++){
            if(files[i] != ""){
                document.getElementById("container").innerHTML += '<a class="lightbox" href="img/'+files[i]+'"><img src="thumb/'+files[i]+'" /></a>';
                j++;
                
                if(j == 3 || j == 6)
                    document.getElementById("container").innerHTML += '';
                else if(j == 9){
                    document.getElementById("container").innerHTML += '<p>'+(n-1)+" Images Displayed | <a href='#header'>top</a></p><hr />";
                    j = 0;
                }
            }
        }
于 2021-05-11T17:09:48.767 回答