jQuery - create an array containing images located in a server folder

Question

I'm pretty new to jQuery and I am trying to achieve the following solution.

I am using a nice image carousel/slider that requires me to have a div on the page containing the images that I want the carousel to use. I want the flexibility to put images in a folder instead of hard coding them, and the images then be displayed, so:

a folder (img) on my server containing any number of images
some solution to create a list (array) of the images (their paths)
the list or array to be used with the carousel, whether it just generates the HTML or not I guess is half the problem!

I appreciate the help!

@RobW - as I said I am learning..

/--- edit: I found a solution using jQuery templates. It may not be the smartest, but here it is:

I created a div that I want the images placed in:

<div id="imageContainer"></div>     
<!-- Create template -->
    <script id="imageTemplate" type="text/x-jquery-tmpl">
        <img id="imageItem" src='../PublishingImages/${Name}' alt="${Desc}" />
    </script>
<!-- Get data -->
    <script type="text/javascript">
        $(document).ready(function () {
            $.getJSON(
                '../_vti_bin/ListData.svc/Images',
                    function(data) {
                        $('#imageTemplate')             //select the template
                            .tmpl(data.d.results)       //bind it to the data
                                .appendTo('#imageContainer');   //render the output
                                    });
                                    }); 
    </script>

I'm afraid this is not possible without using a server-side processing first like asp.net or php to populate the list of images. — Didier Ghys
– Didier Ghys, Commented Dec 12, 2011 at 10:46
So, what's the question? So far, your question looks like a set of requirements, without any code. Show what you have tried, and ask more specific questions. If you have no code, go hire a programmer. — Rob W
– Rob W, Commented Dec 12, 2011 at 10:47

PiTheNumber · Accepted Answer · 2011-12-12 10:58:15Z

1

You need PHP (or something) for this.

Have a look at the dynamic examples. There you can learn how to load the images. You will also need to write a small PHP script. Get startet with PHP. I guess you need mainly scandir and a foreach loop.

edited Dec 12, 2011 at 10:58

answered Dec 12, 2011 at 10:50

PiTheNumber

23.7k17 gold badges115 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory McCrossan · Accepted Answer · 2011-12-12 11:03:49Z

1

jQuery is a framework for Javascript which is a client-side language, so it is impossible for it to directly interact with your server to get a file list from a folder.

To achieve this you'd need to use a server-side language such as PHP or ASP.Net to get the file list. You could then write this straight to the page, or use jQuery to make an AJAX request to get the data.

edited Dec 12, 2011 at 11:03

answered Dec 12, 2011 at 10:46

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

2 Comments

Andy E Over a year ago

"jQuery is a client-side language" – JavaScript is the language, jQuery is just a JavaScript library :-)

Raynos Over a year ago

"ASP.NET is a server-side language" - C# is the language, ASP.NET is just a C# library :-)

user1393215 · Accepted Answer · 2013-07-25 16:47:38Z

0

It actually is possible, IF the server returns an index page for the folder.

Just grab all anchor references on the page.

Here's an example: (modified from something similar found online a week or two ago)

var paintingarray = [];
var dir = "paintings";
var fileextension=".jpg";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: dir,
    success: function (data) {
        //List all jpg files on the page
            $(data).find("a:contains(" + fileextension + ")").each(function () {
             var filename = this.href.replace(window.location.host,"").replace(window.location.pathname, "").replace("http://","");              

            paintingarray.push(dir + "/"+filename);

        });
    }
});

answered Jul 25, 2013 at 16:47

user1393215

1 Comment

user1393215 Over a year ago

Yes this was an old post. However this would have worked at the time, and still works now.

Collectives™ on Stack Overflow

jQuery - create an array containing images located in a server folder

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related