php - Getting images from folder with for jQuery slideshow - Stack Overflow

admin管理员组

文章数量:1395730

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?

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?

• php
• javascript
• jquery
• slideshow
• photo

Share Improve this question Follow asked Nov 7, 2011 at 1:43 Tural AliTural Ali 23.3k1818 gold badges8181 silver badges133133 bronze badges 3

• If you think my answer is correct can you mark it so. – Prasanna Raghu Commented Nov 7, 2011 at 23:57
• that is "half" answer. i still can't get it work. – Tural Ali Commented Nov 8, 2011 at 0:34
• What is the issue now, maybe i can help ? – Prasanna Raghu Commented Nov 8, 2011 at 4:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 ?>'},
<? } ?>

    ])
  });

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./a/32940532/383904

本文标签： phpGetting images from folder with for jQuery slideshowStack Overflow