0

嗨，我在 Phonegap v2.9.0 和 Jquerymobile v1.3.2 工作，我正在使用 xcode v5 编辑器。我正在使用此照片灯箱将图像显示为灯箱。我也尝试过photoswipe，但我认为问题是循环中的异步ajax。我想从网络服务加载照片。为此，我必须加载专辑。相册加载正常。当我单击该特定相册列表的照片链接被加载并保存在数组中。我必须循环每个链接以获取该相册的每张照片，除了灯箱外，一切正常。当我在另一个页面中复制 divgallery 的 (console.log('liGallery complete==' + aGallery);) 内容的日志时，它们工作正常，但不在我想要显示它们的页面中。
这是我的代码

window.LoadphotosView = function(){
    try{
        var  aGallery = "";

        var ItemsCount=photolink_arr.length;
        var divGallery = document.getElementById("Gallery"); 
        var X_CSRFToken = sessionStorage.getItem('X_CSRFToken');
        var cookies='SUID=' + X_CSRFToken;

        console.log('LoadphotosView function');
        console.log('photolink_arr=' + photolink_arr[0]); 
        console.log('photolink_arr.length=' + ItemsCount);

        if(ItemsCount==0 || ItemsCount =='undefined' || ItemsCount==''){
            divGallery.innerHTML = 'No photo found';
            return;
        }

        for (var i=0; i <  ItemsCount; i++)
        {  
            $.ajax({
                type: 'get',
                ajaxcounter: i,
                async: false, 
                url: photolink_arr[i],
                dataType: "json",
                contentType: "application/vnd.domain.collection+json; charset=utf8",
                headers: {Cookie: cookies},
                success: function (data){  
                    var photo= data.image_link;
                    var thumbphoto= data.thumbnail_link;  
                    console.log('counter=' + this.ajaxcounter); 
                    console.log("stringify photolink_arr=" + JSON.stringify(data));
                    console.log("data.items.photo_link=" + data.image_link); 
                    console.log('photo==' + photo);
                    console.log('thumbphoto==' + thumbphoto);  

                    aGallery += ' <a href="#popupPhoto' + i + '" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="' + thumbphoto + '" alt="Thumb Photos" style="width:200px;height:200px;padding:5px;"></a>   <div data-role="popup" id="popupPhoto' + i + '" data-overlay-theme="a" data-theme="d" data-position-to="window" data-corners="false"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a><img class="popphoto" src="' + photo + '" style="max-height:512px;" alt="Photos"> </div>'; 


                    if(this.ajaxcounter==ItemsCount-1){ 
                         console.log('liGallery complete==' + aGallery);
                        divGallery.innerHTML= aGallery ;
                    }
                },
                complete: function() {                    
                    console.log ('LoadphotosView function complete');                    
                },            
                error: function (request,data)
                { 
                    alert("load albums error request=" + JSON.stringify( request)); 
                }
            }) ; 
        }  
    }
    catch(e)
    {
        alert(e);
    }
}

html代码

   <div id="Gallery" data-role="content" class="gallery">
       <div style='font-size:14pt;color:#fff;'>Loading..</div>
    </div>

请帮助我了解如何在 Jquerymobile、Phonegap 中将图像作为灯箱

4

0 回答 0