How to dynamically load all of the image from a folder for an image slideshow - jquery

Question

Basically what I am after is a way to dynamically load all of the images in a folder (held on the server) into my nivo slider. Currently the script in nivo slider requires me to reference each photo individually. For example:

<div class="slider-wrapper theme-default">
        <div class="ribbon"></div>
        <div id="slider" class="nivoSlider">
            <img src="images/toystory.jpg" alt="" />
            <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
            <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
            <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
        </div>

(the above code was pulled out from the html file).

As novice users will be maintaining the website, there will be no ability for them to go in and manually change the code each time they add or remove photos from the directory.

At this point I dont mind whether all or some of the photos are loaded when the page loads.

I have had a bit of trouble finding any information about how to solve this problem. Once of the closest sources I have been able to find has been on this site (How to load images dynamically (or lazily) when users scrolls them into view).

Though to be honest, I am quiet new to jquery (and programming in general), and am struggling with some of the basics. Therefore please take a dummies approach when answering the question for me.

Currently I have the images folder (stores all of the images), a jscript file, and a css file which are stored on the server. I then add html to a webpart (as sharepoint is used to madify the webpage) to make the slider appear.

Can the code be done all client-side or does in need to be done both server and client side?

Answer 1

It is not possible for clients like browsers to know all the files in a directory on the server. Unless, directory listing is enabled, which is considered as a security issue in most cases, and I would recommend otherwise..

1. Check here how to enable directory listing for tomcat for example. If you do enable this, hit the directory path using an ajax call, search for all hyperlinks in the response, filter those that have jpg in extension and pass the links to the plugin.

2. Better yet, write a service on the server side to get the list of files in this particular directory dynamically (use proper authentication, still an issue though), hit the service to get the list of files and pass them to the plugin.