Я постараюсь сделать этот пост максимально коротким.

Я пытаюсь создать мобильную веб-страницу jquery, где я импортирую фотографии и альбомы со страницы facebook, используя javascript sdk facebook, и показываю их на своей странице. Я также используюPhotoSwipe плагин для отображения альбомов с эффектами карусели и т. д.Вам не нужно иметь какие-либо знания о плагине или SDK, чтобы помочь Как я могу сказать вам, где именно моя проблема, и вам нужно знать только javascript / jquery.

Моя проблема в том, что я импортирую альбомы и показываю их пользователю, ноя не могу получить эффект карусели плагина, Из примера кода плагина, когда пользователь выбирает картинку, выполняется этот код:

$(document).ready(function(){

                $('div.gallery-page')
                    .live('pageshow', function(e){
                        var 
                            currentPage = $(e.target),
                            options = {},
                            photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));

                        return true;

                    })

                    .live('pagehide', function(e){

                        var 
                            currentPage = $(e.target),
                            photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

                        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                            PhotoSwipe.detatch(photoSwipeInstance);
                        }

                        return true;

                    });

            });

        }(window, window.jQuery, window.Code.PhotoSwipe));

Я использую тот же код (я использую .on в моем коде) для моего "динамически генерируемые» веб-страница, но кажется, что код внутри$('div.gallery-page') НИКОГДА не выполняется. И я действительно не могу понять, почему, поскольку генерируемая мной страница идентична странице примера. Я даю то же самоеclass имена, я использую то же самоеdivs все.

Это мой код:

 


    
    CityInfo
    

    
    
    

      
    
    
    

    
        //PhotoSwipe
        /*
         * IMPORTANT!!!
         * REMEMBER TO ADD  rel="external"  to your anchor tags. 
         * If you don't this will mess with how jQuery Mobile works
         */
        (function(window, $, PhotoSwipe){
            $(document).ready(function(){
                $('div.gallery-page')
                    .on('pageshow', function(e){
                        var 
                            currentPage = $(e.target),
                            options = {},
                            photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));  
                        return true;    
                    })

                    .on('pagehide', function(e){
                        var 
                            currentPage = $(e.target),
                            photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
                        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                            PhotoSwipe.detatch(photoSwipeInstance);
                        }
                        return true;    
                    }); 
            });
        }(window, window.jQuery, window.Code.PhotoSwipe));
    

 

 

    
    
        var albumPhotos = new Array();
        var albumThumbnails = new Array();
        // start the entire process
        window.fbAsyncInit = function() {
            // init the FB JS SDK 
            FB.init({
                appId      : '564984346887426',                                                  // App ID from the app dashboard
                channelUrl : 'channel.html',                       // Channel file for x-domain comms
                status     : true,                                                               // Check Facebook Login status
                xfbml      : true                                                                // Look for social plugins on the page
            });

            FB.api('169070991963/albums', checkForErrorFirst(getAlbums));

        }


        // checkForErrorFirst wraps your function around the error checking code first
        // if there is no response, then your code will not be called
        // this allows you to just write the juicy working code 
        //   and not worry about error checking
        function checkForErrorFirst(myFunc) {
            return function(response) { 
                if (!response || response.error) {
                    alert("Noo!!");
                } else {
                    myFunc(response);
                }
            };
        }


        function getAlbums(response) {
            for (var i=0; i < response.data.length; ++i) {
                processAlbum(response.data[i], i);
            } 
        }


        function processAlbum(album, i) {
            FB.api(album.id + "/photos", checkForErrorFirst(populateAlbum(album, i)));
        }


        function populateAlbum(album, i) {
            return function(response) {
                for (var k=0; k < response.data.length; ++k){ 
                    albumThumbnails[i] =  albumThumbnails[i]||[];
                    albumThumbnails[i][k] = response.data[k].picture;
                    albumPhotos[i] = albumPhotos[i]||[];
                    albumPhotos[i][k] = response.data[k].source;
                }

                // now that we've populated the album thumbnails and photos, we can render the album
                FB.api(album.cover_photo, checkForErrorFirst(renderAlbum(album, i)));
            };
        }

        function renderAlbum(album, i) {
            return function(response) {
                var albumName = album.name;
                var albumCover = album.cover_photo;
                var albumId = album.id;
                var numberOfPhotos = album.count;

               // render photos
               $(".albums").append(''+
               '<a href="#Gallery' + i + '" '="" +="" 'data-transition="slidedown">'+
               '<img src="' + response.picture + '">'+
               '' + albumName + ''+
               '<p>' + "Number of Photos:  " + numberOfPhotos +'</p>'+
               '</a>'+
               '').listview('refresh');

               $("#Home").after(' ' +
               ' Gallery ' + '  ' +
               '  ' + '  ' +
               '  ');

               for(var x=0; x < albumPhotos[i].length; x++)
                    $('#Gallery' + i + ' .gallery').append('<a href="' + albumPhotos[i][x] 
                    + '" rel="external"><img src="' +  albumThumbnails[i][x] + '" '="" +=""> </a> ');
             };
        }

        // Load the SDK asynchronously
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

    



    
        
            Photo Albums
                  
             
              
    

Я думаю, что важная часть здесь такова:

 $("#Home").after(' ' +
               ' Gallery ' + '  ' +
               '  ' + '  ' +
               '  ');

где, как вы можете видеть, я даю правильное имя классаclass="gallery-page" каждому динамически генерируемому div.

Я также приведу здесь 2 скриншота при отладке с помощью chrome, один из примера кода, который работает, и один из моего кода, просто чтобы показать вам, что элементы на последней html-странице выглядят одинаково.

Пример кода (пример кода, приведенный на сайте, имеет 2 галереи фотографий, я расширил одну, чтобы увидеть, как HTML-элементы):

Мой код (поскольку я импортирую альбомы со страницы facebook, здесь у нас намного больше галерей. Опять я расширяю одну из них, чтобы показать вам, что элементы html идентичны примеру, и я использую те же классы и элементы div):

Для увеличения изображений нажмите Ctrl + (+). Чтобы вернуться к обычному режиму, нажмите Ctrl + (-).

Если у вас есть ЛЮБОЕ представление о том, почему JavaScript не выполняется, пожалуйста, оставьте подсказку. Я пытаюсь исправить это больше недели, но безуспешно. Большое спасибо за чтение до здесь.