Getting images from folder with for jQuery slideshow

Question

My Jquery slideshow script looks like that

  $(function() {
    $('#bg').crossSlide({
      sleep: 3,
      shuffle: true,
      fade: 1
    }, [
  { src: 'core/design/images/bgs/1.jpg'},
  { src: 'core/design/images/bgs/2.jpg'},
  { src: 'core/design/images/bgs/3.jpg'},
  { src: 'core/design/images/bgs/4.jpg'}
    ])
  });

As you see, I declared the images' paths one by one. Is there any way to scan folder for images and add all at once. Maybe, it can be done with PHP?

If you think my answer is correct can you mark it so. – Prasanna Raghu Nov 07 '11 at 23:57 — Prasanna Raghu, Nov 07 '11 at 23:57
that is "half" answer. i still can't get it work. – Tural Ali Nov 08 '11 at 00:34 — Tural Ali, Nov 08 '11 at 00:34
What is the issue now, maybe i can help ? – Prasanna Raghu Nov 08 '11 at 04:58 — Prasanna Raghu, Nov 08 '11 at 04:58

score 4 · Accepted Answer · answered Nov 07 '11 at 02:05

4

It cannot be done with Javascript. But with a embedded server side code it should be possible (like PHP). Here is an example in php.

There exists a function called glob, which might be suitable for your purpose. Here is an example of how to use it.

$path = <absolute path for the folder where images are located>
$images = glob($path.'/*.jpg') // this returns an array of file names only doesnt contain the path

Now you have the list of arrays in php. You have to start using this in javascript

$(function() {
$('#bg').crossSlide({
  sleep: 3,
  shuffle: true,
  fade: 1
}, [
<?php foreach($images as $filename){ ?>
    { src: 'core/design/images/bgs/<?php echo $filename.jpg ?>'},
<? } ?>

    ])
  });

answered Nov 07 '11 at 02:05

Prasanna Raghu

2,593
3
22
25

my html markup and js file is separate. so i can't place pho code into js. there must be another solution which takes all paths via ajax from php. And it's not good practice to mess up logic with markup – Tural Ali Nov 07 '11 at 02:09
Well you can send an ajax request to fetch JSON of imagePath. Once you get the JSON you can eval and get the actual file paths, which you can insert into your js. – Prasanna Raghu Nov 07 '11 at 04:49

score 0 · Answer 2 · edited May 23 '17 at 12:04

Yes. It can be done using JS / jQuery:

Works both locally and on live server without issues, and allows you to extend the delimited list of allowed file-extensions:

var folder = "core/design/images/bgs/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.jpg|\.png|\.gif/) ) { 
                $("body").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});

in your case you want to construct an array of Objects {src:"path"} so it could look like:

var folder = "core/design/images/bgs/";

$.ajax({
    url : folder,
    success: function (data) {
        var srcArr = [];
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.jpg|\.png|\.gif/) ) { 
                var ob = {src : folder+val};
                srcArr.push( ob );
            } 
        });
        // Now that the Array is filled with Objects send to callback
        readFolderCallback( srcArr );
    }
});


function readFolderCallback( srcArr ) {
    $('#bg').crossSlide({
      sleep: 3,
      shuffle: true,
      fade: 1
    }, arrSrc);
}

https://stackoverflow.com/a/32940532/383904

Not if the server has directory indexing turned off (every production server worth its salt). Theres no way for the JS to know the list of files in a directory blindly. — IncredibleHat, Mar 29 '19 at 19:04

Getting images from folder with for jQuery slideshow

2 Answers2

Linked