jQuery Web Gallery problems

Question

I have a project for an Infinite Scrolling Gallery using jQuery and php script that reads pictures from a directory and post them on an endless page. I added a photo extention for a lightbox that I have use before and it works wonderfully. I have tried to blend the two together and create a infinitely scrolling lightbox gallery but they don't function properly. The ones work seperately but everytime I implement them together my webpage just stares at me and does nothing. Maybe I'm missing something please help me.

The gallery base I am using: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-infinite-scroll-web-gallery/

The light box base: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Answer 1

The class call for the lightbox CSS on the object was incorrect. I did not add the class in the jQuery so the images did nothing but update the images, not the CSS functionality.

Example: What I did:

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

What I should have done (<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;
                }
            }
        }