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?

Do you got any key to achieve this concept? If got means tell us..! — gowri, Oct 10 '13 at 07:28

score 0 · Answer 1 · answered Apr 20 '12 at 05:21

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..

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.
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.

score 0 · Answer 2 · answered Apr 20 '12 at 06:42

0

I would recommend to load all the image paths into a javascript array using an ajax call (which require a server side programming and image folder has to be on the server). Then you can google for any slideshow jquery plugin to create an awesome slideshow.

answered Apr 20 '12 at 06:42

codef0rmer

9,854
9
46
75

thank you for your answer! I was thinking it would have to be done similarly to what you said after doing some research into my problem. What type of code would I need to write for the call? Thank you! – Ben Cheski Apr 22 '12 at 23:04
choose whichever slideshown jquery plugin you like but it should have a callback function (most plugins have). Callback functions are necessary for you to take actions if any event occurs (i.e. once the image is loaded or once you reach the last image in the slideshow etc). Inside your callback function, you should add some code for new images to be added - fetched dynamically using AJAX. – codef0rmer Apr 24 '12 at 06:55

score 0 · Answer 3 · answered May 10 '12 at 02:45

I was after the same thing and wrote some changes to the nivo slider that got it to work.

You need to:

write some server side code to retrieve all the images from a server folder. Just the path so you can add it to an image dom object
write some javascript ajax code to call the server side code and then parse the response and create image objects to then add to the dom

I don't think the current version of nivo allows for new images to be added the slider so you need to

update the nivo code to allow for new images to be added

score 0 · Answer 4 · answered Dec 31 '13 at 11:52

0

It's possible to retrieve image from directory server with php and dropzone.js

please check this how-to link http://www.startutorial.com/articles/view/dropzonejs-php-how-to-display-existing-files-on-server

answered Dec 31 '13 at 11:52

Minanube

1

score 0 · Answer 5 · edited Nov 11 '15 at 15:22

This will put the image names in a Javascript array:

$dir = 'images/c-data/' . $result; //set the working directory
$pics = scandir($dir);
unset($pics[0], $pics[1]); //first and second ellement are the "."".." , get rid of them
$string = '<script type ="text/javascript">var images_' . $result . ' =[ ';
foreach ($pics as $key => $item) {
    $string .= '"' . $item . '",';
}
echo substr($string, 0, -1) . "];</script>";

This will echo them out as it cycles through them:

$path = 'images/c-data/';
$results = scandir($path);
$dirArray = array();
unset($results[0], $results[1]); //first and second ellement are the "."".." , get rid of them
foreach ($results as $result) {
    echo 'Image' . $result . ', ';
}

In both cases we are using the php scandir() which returns an array of all the items in the directory.

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

5 Answers5