Question

我一直在与Phonegap和Photoswipe挣扎。这就是我所拥有的：

1）目前我通过php JSON调用（工作）请求远程图像

2）返回JSON图像并将其本地存储到Android设备（正常工作）

3）所有图像都显示在Photswipe缩略图库页面（正常工作）

问题在这里 4）当我点击缩略图时，我没有获得Photoswipe图库格式，它只是将图像加载到空白页面。

我的猜测是在将所有图像完全传递给＆lt; #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
            });

Phonegap + Photoswipe带有远程图像

1 个答案: