Add <li> dynamically reading from a folder photoswipe purpose

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.

Solution

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/

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

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

Update:

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);