添加< li>动态地从文件夹中读取照片目的 [英] Add <li> dynamically reading from a folder photoswipe purpose

问题描述

对不起，我的英文，我是jquery mobile的新手，并且仅具有关于javascript语言的基本知识；我当时正在使用单页网站移动设备(我通常使用Dreamweaver CS6)玩耍，并且使用光笔擦拭效果很好，并且由于图像很少，所以一切都很好.我添加了很多，所以现在我将动态获取图像的链接.

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.

简而言之，我想从ftp上的一个文件夹开始，读取其中的所有图像文件，并为每个文件夹创建<li>项目.我可以使用jquery mobile来完成这项工作吗，还是应该使用php或.Net这样的语言?

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

我在这里和Google上都读过一些示例，但是像这样的示例，它们并没有给我带来太大帮助，我敢肯定这可能是我的答案，但我不知道该如何开始 http://docs.phonegap.com/en/2.4.0 /cordova_file_file.md.html#DirectoryReader

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>

然后打开我的页面

<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文件夹，而不可以循环内容吗? 我应该把它放在一个函数中吗?如果是，谁将给它打电话?

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=?&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.

推荐答案

您应该使用pageinit和pagebeforeshow代替$(document).ready.此外，不建议使用.live()方法.使用.on()附加事件处理程序.较旧版本的jQuery的用户应优先使用.delegate()而不是.live(). http://api.jquery.com/live/

You should use pageinit and pagebeforeshow Instead of $(document).ready. Also .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). http://api.jquery.com/live/

附加列表项: $("#PhotoList").append('<li><a href="..

Append list Items: $("#PhotoList").append('<li><a href="..

完成刷新列表以显示新列表: $('#PhotoList').listview('refresh');

When you finish refresh the list to display your new list: $('#PhotoList').listview('refresh');

更新:

我在服务器上使用php程序来检索json字符串.像这样...

I use php programs on my server in order to retrieve json strings. Something like this...

xhr = new XMLHttpRequest();
xhr.open("GET","http://192.168.100.2/sr/quotelisttest?name="+s,true);                  
xhr.send("");



xhr.onreadystatechange = function() {
if (xhr.readyState === 4){
    alert(xhr.readyState);
    alert(xhr.responseText);

    var v = JSON.parse(xhr.responseText);

这篇关于添加< li>动态地从文件夹中读取照片目的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！