How to use the Supersized! plugin with image folde

Question

So I'm working with the Supersized! plugin from here: plugin link

The default way to load images is up top through Javascript. My question is, does anyone know of a way to load in a specific folder? So the plugin pulls all the images in that folder regardless if there's 5 or 50...

One step further: Ideally, I would love to have 4 "Galleries", each being images inside a folder, then I can build a navigation where when someone clicks, for example, the "landscape" section, it loads all the images in the landscape folder. So the whole site would be a single page.

WIP site here, just manually adding images: hieldphotography.com/new/

Thanks in advance.

Answer 1

use a server side language like PHP to collect all files in the folder, then build the array/string and print it on the page.

Here is the very simple way of doing this..

function getAllImagesInDirectory($path) {
    if ($handle = opendir($path)) {
        $images = "[";
        while (false !== ($file = readdir($handle))) {
            if($file !== "." && $file !== "..") {
                $images .= "{image : '$path$file', title : '', url : ''},";
            }
        }
        closedir($handle);
        return substr($images,0,strlen($images)-1) . "]";
    }
}

and then in your code replace the

    slides                  :   [       //Slideshow Images
                                                            {image : 'images/people/people1.jpg', title : '', url : ''},

... snippet
                                                            {image : 'images/people/people35.jpg', title : '', url : ''}  
                                                    ]

with

slides  : <?php echo getAllImagesInDirectory("images/people/"); ?>