2012-10-28 53 views
3

我一直在挣扎与Phonegap和Photoswipe。以下是我有:Phonegap +与远程图像Photoswipe

1)目前,我通过一个PHP JSON电话(工作)请求远程图像

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

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

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

我的猜测是photoswipe脚本加载之前,我已经完全通过了所有的图像到< #gallery

我的问题是如何重新初始化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> 

回答

4

由GET呼叫接收后的照片,你必须初始化photoswipe画廊:

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

谢谢你,我其实只是刚刚想通了这一点。好时机。现在你已经帮我解决了这个问题。如果我点击网格中的第一张图片,我只能以滑动模式获取该图片。如果我点击第5张图片,我只能在滑动模式下获取图片1-5。如何将所有图像加载到滑动模式现在,请选择网格中的缩略图图像。非常感谢你的帮助.... – mxride