こんにちは、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で画像をライトボックスとして使用する方法を教えてください