添加

从文件夹photoswipe目的动态读取(Add

dynamically reading from a folder photoswipe purpose)

 对不起我的英语，我是jquery手机的新手，一般只掌握javascript语言的基本知识; 我正在玩一个单页网站移动（我通常使用Dreamweaver CS6），我用photoswipe达到了一个很好的结果，一切都很好，因为我只有几个图像。 我添加了很多它们，所以现在我会动态地获取图像的链接。 
 
 简而言之，我想从我的ftp上的文件夹开始并读取其中的所有图像文件，并为每个文件创建<li>项目。 我可以使用jquery mobile完成这项工作，还是应该使用像php或.Net这样的语言 
 
 我已经在这里和谷歌上阅读了一些例子，但他们并没有帮助我很多，比如这个，我相信它可能是我的答案，但我不知道如何启动http：// docs .phonegap.com / EN / 2.4.0 / cordova_file_file.md.html＃DirectoryReader 
 
 这里有一些我正在使用的代码： 
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<!-- Librerie PhotoSwipe   -->
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/photoswipe.css">
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/styles.css">
<script type="text/javascript" src="../PhotoSwipe/klass.min.js"></script>
<script type="text/javascript" src="../PhotoSwipe/code.photoswipe-3.0.5.min.js"></script>
<!-- End PhotoSwipe   -->

    <script type="text/javascript">
$(document).ready(function(){ var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false, captionAndToolbarAutoHideDelay: 0 }); }); 
</script>
 
 然后我的页面 
 
<div data-role="page" id="page">
    <div data-role="header">
        <h1>Title of my Page</h1>
    </div>

    <div data-role="content">   
    <ul id="Gallery" class="gallery">  

    <li>
    <a href="../Images/img04.jpg">
    <img src="../Images/img04.jpg" alt=""></a>
    </li> 
</ul>
</div>
 
 当我登陆这个页面时一切正常。 我要用这样的东西吗？ 我从这个网站上获取，我可以使用JSON加入我的ftp文件夹而不是循环内容吗？ 我应该把它放在一个功能中吗？ 如果是谁将打电话给它？ 
 
$("#Photos").live("pagebeforeshow", function(){
    $("ul#PhotoList").children().remove('li');
    var tag = MyTag
    $.getJSON("https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&amp;client_id=####",
    function(data){
        $.each(data.data, function(i,item){
            $("ul#PhotoList").append('<li><a href="' + item.images.low_resolution.url + ' rel="external"><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="200" /></a></li>');
        });
    });
    var photoSwipeInstance = $("ul#PhotoList a").photoSwipe();
});
 
 任何帮助都是适当的，谢谢你，我相信我的问题是我的有限知识。 

Sorry for my English, I am a new to jquery mobile and only have basic knowledge about javascript languages in general; I was playing around with a single page website mobile ( I usually use Dreamweaver CS6) and I reached a good result with photoswipe and everything was good since I had just few images. I have added a lot of them so now I would get the images' link dynamically.
 
In short, I want to start from a folder on my ftp and read all images file within it and create the <li> items for each one. Can I make this job with jquery mobile or should I use a language like php or .Net
 
I have read some examples around here and on google but they didn't help me a lot, like this one, I am sure it could be an answer for me in it but I don't know how to start http://docs.phonegap.com/en/2.4.0/cordova_file_file.md.html#DirectoryReader
 
Here some code I'm using:
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<!-- Librerie PhotoSwipe   -->
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/photoswipe.css">
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/styles.css">
<script type="text/javascript" src="../PhotoSwipe/klass.min.js"></script>
<script type="text/javascript" src="../PhotoSwipe/code.photoswipe-3.0.5.min.js"></script>
<!-- End PhotoSwipe   -->

    <script type="text/javascript">
$(document).ready(function(){ var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false, captionAndToolbarAutoHideDelay: 0 }); }); 
</script>
 
Then my page
 
<div data-role="page" id="page">
    <div data-role="header">
        <h1>Title of my Page</h1>
    </div>

    <div data-role="content">   
    <ul id="Gallery" class="gallery">  

    <li>
    <a href="../Images/img04.jpg">
    <img src="../Images/img04.jpg" alt=""></a>
    </li> 
</ul>
</div>
 
When i land on this page everything works fine. Shall I use something like this? That I took from this website, can I use JSON to accede to my ftp folder and than cycle the content? Should I put this in a function? If yes who is going to call it? 
 
$("#Photos").live("pagebeforeshow", function(){
    $("ul#PhotoList").children().remove('li');
    var tag = MyTag
    $.getJSON("https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&amp;client_id=####",
    function(data){
        $.each(data.data, function(i,item){
            $("ul#PhotoList").append('<li><a href="' + item.images.low_resolution.url + ' rel="external"><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="200" /></a></li>');
        });
    });
    var photoSwipeInstance = $("ul#PhotoList a").photoSwipe();
});
 
Any help is appriciated, thank you in advance, I am sure my issue here is my limited knowledge.

原文：https://stackoverflow.com/questions/20594727