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>   

- mxride

Answer 1

在通过GET调用收到照片后，您必须初始化Photoswipe图库：

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

- mram888

---

谢谢，我刚刚想到了。时间点非常好。既然你帮我解决了这个问题。如果我点击网格中的第一张图片，我只能在滑动模式下看到那张图片。如果我点击第五张图片，我只能在滑动模式下看到1-5张图片。无论选择网格中的哪个缩略图，我该如何将所有图片加载到滑动模式中。非常感谢你的帮助... - mxride