Проблемы с jQuery Web Gallery

Question

У меня есть проект для галереи бесконечной прокрутки, использующий 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/

Answer 1

Вызов класса для 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;
                }
            }
        }