android - 带有远程图像的 Phonegap + Photoswipe

Question

我一直在努力使用 Phonegap 和 Photoswipe。这是我所拥有的:

1) 目前我正在通过 php JSON 调用请求远程图像(工作中)

2) 返回 JSON 图像并在本地存储到 Android 设备(工作)

3) 所有图像都显示在 Photswipe 缩略图库页面上(工作中)

问题来了4) 当我点击缩略图时，我没有获得 Photoswipe 画廊格式，它只是将图像加载到空白页面。

我的猜测是在我将所有图像完全传递到 <#gallery

之前 photoswipe 脚本正在加载

我的问题是如何重新初始化 Photoswipe 以读取所有图像或如何将 Photoswipe 功能附加到附加到

我正在尝试发布我现在正在使用的代码，但这里的格式有问题。

//Global instance of DirectoryEntry for our data
var DATADIR;
var knownfiles = [];    

//Loaded my file system, now let's get a directory entry for where I'll store my   crap    
function onFSSuccess(fileSystem) {
fileSystem.root.getDirectory("Android/data/com.moto.photoloader",create:true,exclusive:false},gotDir,onError);
}

//The directory entry callback
function gotDir(d){
console.log("got dir");
DATADIR = d;
var reader = DATADIR.createReader();
reader.readEntries(function(d){
    gotFiles(d);
    appReady();
},onError);
}


//Result of reading my directory
function gotFiles(entries) {
console.log("The dir has "+entries.length+" entries.");
for (var i=0; i<entries.length; i++) {
console.log(entries[i].name+' dir? '+entries[i].isDirectory);
    knownfiles.push(entries[i].name);
    renderPicture(entries[i].fullPath);
}
}

function renderPicture(path){
$("#Gallery").append("<li><a href='"http://myurltofullimages"'><img src='"+path+"' alt=\"Image 018\"/></a></li>");
console.log("<li><a href='"/myurltofullimages"'><img src='"+path+"' alt=\"Image 018\"/></a></li>");

}

function onError(e){
console.log("ERROR");
console.log(JSON.stringify(e));
}

function onDeviceReady() {
//what do we have in cache already?
$("#status").html("Checking your local cache....");    
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSSuccess, null);    
}

function appReady(){
$("#status").html("Ready to check remote files...");
$.get("http://myurltojsonphp/photo_upload/json.php", {}, function(res) {
    if (res.length > 0) {
        $("#status").html("Going to sync some images...");
        for (var i = 0; i < res.length; i++) {
            if (knownfiles.indexOf(res[i]) == -1) {
                console.log("need to download " + res[i]);
                var ft = new FileTransfer();
                var dlPath = DATADIR.fullPath + "/" + res[i];
console.log("downloading crap to " + dlPath);
ft.download("http://myurl/photo_upload/am/woman/thumb/" + escape(res[i]), dlPath, function(){
renderPicture(e.fullPath);
console.log("Successful download of "+e.fullPath);
}, onError);         

            }
        }
    }
    $("#status").html("");
}, "json");

}

{
document.addEventListener("deviceready", onDeviceReady, true);

}
</script>

<script type="text/javascript">

    (function(window, PhotoSwipe){

        document.addEventListener('DOMContentLoaded', function(){

            var
                options = {},
                instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );

        }, false);


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

</script>   

Answer 1

通过 GET 调用接收到照片后，您必须初始化 photoswipe 画廊:

            $("ul.gallery a").photoSwipe(
            {
                allowUserZoom: false,
                jQueryMobile: true,
                autoStartSlideshow: false,
                backButtonHideEnabled: false,
                captionAndToolbarAutoHideDelay: 0,
                preventSlideshow: true
            });