0

こんにちは、Phonegap v2.9.0 と Jquerymobile v1.3.2 で作業しており、xcode v5 エディターを使用しています。この写真ライトボックスを使用して、画像をライトボックスとして表示しています。私も写真スワイプを試しましたが、問題は async ajax in loop だと思います。Web サービスから写真を読み込みたい。このために、アルバムをロードする必要があります。アルバムは正常にロードされています。その特定のアルバムのリストをクリックすると、写真リンクが読み込まれ、配列に保存されます。各リンクをループして、そのアルバムの各写真を取得する必要があります。ライトボックス以外はすべて正常に機能しています。( console.log('liGallery complete==' + aGallery);) divgallery の内容のログを別のページにコピーすると、正常に動作しますが、表示したいページでは動作しません。
これが私のコードです

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