Slideshow of images from a directory/folder?

I apologize for reviving this post after several months, but I'm having a similar issue myself and the codes suggested in this thread are the closest I've gotten to an answer.

Essentially, I'm trying to create a gesture drawing tool for myself (similar to this site if anyone needs an example). I can't figure out a way to display photos one at a time. I need this to work with a ton of photos; my "people" folder is almost 8,000 pictures, and that's just one category.

When I tried Nancy's code, all the buttons on the page disappeared, and when I tried Os' code, it tried to post every single photo to the webpage at once....which made my computer freeze. I need a slideshow that will pull one image from the appropriate folder at a time. While I was looking at the source for Pixelovely (the link above), I noticed only two images were added to the resources at a time. It's not like my site where every photo is immediately loaded. I don't know enough about programming and webdesign to understand how they did that just by looking at the script. But if I can get that function to work, I think it will give me the slideshow I want and stop my computer from freezing any time I use the folder with 7700+ photos.

I hope this I'm making sense. I never feel like I explain this very well. It probably doesn't help that I'm tired.

For record, here's the code from my PHP file, currently using Os' code:

<div id='pics'>

   <?php

        $allppl = glob("Allppl2/*.*");

        for ($i=0; $i<count($allppl); $i++) {

        $num = $allppl[$i];

        echo '<img src="'.$num.'" />';

        }

    ?>

</div>

And here 's a snippet from the JS file:

$(document).ready(function () {

    'use strict';

    $('#pics').hide();

    $('.play').hide();

    //Slideshow Functions

    $('#start').click(function () {

        var allppl = '<?php echo $allppl;?>';

        $('#pics').load(allppl);

        if ($('input[name=ppl]:checked').val() == 30) {

            $('#pics').show(function () {

                $(allppl).cycle({

                    fx: 'fade',

                    next: '#pics',

                    timeout: 30000,

                    random: 1

                });

            });

I wrote a php script for a client that uses jQuery Cycle to fade through a directory of images on server.  Although this isn't random b/c the client specifically wanted slides to appear in order by filename. 

<script type="text/javascript">

$(document).ready(function(){
      $('#myslides2').cycle({
      fx: 'fade', 
      speed: 5000,
      timeout: 1000
      });
});
</script>

<div id="myslides2">

<!--begin dynamic slides-->

<?php

$directory = '../GALLERY/slides/'; //path to slides folder on server

$allowed_types = array('jpg','jpeg','gif','png'

);
$aFiles = array();
$dir_handle = @opendir($directory) or die("There is an error with your image directory!");
while ($file = readdir($dir_handle)) //traverse through directory
{
if($file=='.' || $file == '..') continue; //skip links to parent directories
$file_parts = explode('.',$file); //split file parts and put each into an array
$ext = strtolower(array_pop($file_parts)); //last part is extension
$title = implode('.',$file_parts); //what's left is filename
$title = htmlspecialchars($title); //make the filename html-safe
if(in_array($ext,$allowed_types))
{
$aFiles[] = $file;
}
}
closedir($dir_handle); //close directory
natsort($aFiles); // natural sort filenames
$i=0; //loop
foreach ($aFiles as $file) { //repeat as before
$file_parts = explode('.',$file);
$ext = strtolower(array_pop($file_parts));
$title = implode('.',$file_parts);
$title = htmlspecialchars($title);
    echo '<img src=" '.$directory.'/'.$file.'" alt="Art by XYZ..." />'
;
}
?>
</div>
<!--end myslides2-->

It goes without saying, you'll need to add links to the jQuery core library and Cycle plugin.

Nancy O.

Hi osgood_,

I have not tried this, but it should work for you. The idea is to use the free DMXZone HTML5 Data Source extension on a local JSON file containing the names and paths of the images. The JSON file can be created from the database or it can be constructed manually. You could also use the database directly but then you would have to purchase the Database Connector.

Another way is to upload the images to a public feed like Flickr or Picasa with the same result.

Theoretically, the file names/paths will be loaded and used when the image is  rendered.