Phonegap + Photoswipe with remote images

Question

I have been struggling with Phonegap and Photoswipe. Here is what I have:

1) Currently I am requesting remote images via a php JSON call (working)

2) JSON images are returned and store locally to the Android device(working)

3) All images show up on Photswipe thumbnail gallery page (working)

problem is here 4) when I click on a thumbnail image, I'm not getting the Photoswipe gallery format, it just loads an the image to a blank page.

My guess is the photoswipe script is loading before I have completely passed all the images to the <#gallery

My question is how to re-initialize Photoswipe to read all the images or how to attached the Photoswipe function to the images that are appended to the

I'm trying to post the code I have working now, having trouble with the formatting here.

//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

After receiving the photos by the GET call, you must initialize photoswipe gallery:

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