How to show pictures randomly from directory

**monfree** · 05-29-2012, 07:40 AM

So, how can we show pictures randomly from directory?

**djr33** · 05-29-2012, 08:13 AM

Moderator's note: this has been moved to a new discussion. Please do not reply to an old discussion with a new question.
-----

What resources do you have available? What language(s) do you want to use?

My suggestion would be to use PHP and then get a list of all images from a directory. Then pick one randomly from the list. The function glob() should get the list, then you can shuffle() the array and pick one of them. Note that you should also verify that each is an image.
A better way to do this would be to use a database containing filenames, then select one entry at random and use the filename to locate the file and display that. It takes a little more setup, but it's the best option.

**ApacheTech** · 05-29-2012, 02:26 PM

This can be harder if you don't know the images that are in the folder. If you do, you can do it like this:

HTML Code:

<div id="image_wrapper">
    <img id="random_image" src="/assets/images/gallery/default.gif" alt="Default Image" title="Default Image"  />
</div>

Javascript:

Code:

var Image = function(src, alt) {
    this.src= src;
    this.alt= alt;
}

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


function loadRandomImage() {

    var dir = "/assets/images/gallery/";
    var RandomImages = [new Image(dir + "001.png", "My amazing picture"), 
                        new Image(dir + "002.png", "Another picture"),
                        new Image(dir + "003.png", "Some dude on a bike"),
                        new Image(dir + "004.png", "Balloons"),
                        new Image(dir + "005.png", "Random pic 5")];

    var el = document.getElementById('random_image');
    el.setAttribute('src', RandomImages[getRandomInt(0, 4)].src);
    el.setAttribute('alt', RandomImages[getRandomInt(0, 4)].alt);
    el.setAttribute('title', RandomImages[getRandomInt(0, 4)].alt);
}

Then you can use this in a few ways.

As a button:

HTML Code:

<input type="button" name="btnChangeImage" id="btnChangeImage" value="Change Image" onclick="loadRandomImage()" />

As the page loads:

HTML Code:

<body onload="loadRandomImage()"> ...

When the image itself is clicked:

HTML Code:

<img id="random_image" src="/assets/images/gallery/default.gif" alt="Default Image" title="Default Image" onclick="loadRandomImage()" />

**jscheuer1** · 05-29-2012, 05:02 PM

Originally Posted by ApacheTech

Javascript:

Code:

var Image = function(src, alt) {
    this.src= src;
    this.alt= alt;
}

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


function loadRandomImage() {

    var dir = "/assets/images/gallery/";
    var RandomImages = [new Image(dir + "001.png", "My amazing picture"), 
                        new Image(dir + "002.png", "Another picture"),
                        new Image(dir + "003.png", "Some dude on a bike"),
                        new Image(dir + "004.png", "Balloons"),
                        new Image(dir + "005.png", "Random pic 5")];

    var el = document.getElementById('random_image');
    el.setAttribute('src', RandomImages[getRandomInt(0, 4)].src);
    el.setAttribute('alt', RandomImages[getRandomInt(0, 4)].alt);
    el.setAttribute('title', RandomImages[getRandomInt(0, 4)].alt);
}

That will get you a random image, and a random alt and a random title. I think you meant:

Code:

    var r = getRandomInt(0, 4);
    el.setAttribute('src', RandomImages[r].src);
    el.setAttribute('alt', RandomImages[r].alt);
    el.setAttribute('title', RandomImages[r].alt);

which will select a random image and its alt property for the alt and title attributes.

Even then, I'm not sure you can co-opt javascript's native Image() function like that, probably not in at least some browsers, probably not in any, so:

Code:

function im(src, alt) {
    var im = new Image();
    im.src= src;
    im.alt= alt;
    return im;
}

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


function loadRandomImage() {

    var dir = "/assets/images/gallery/";
    var RandomImages = [im(dir + "001.png", "My amazing picture"), 
                        im(dir + "002.png", "Another picture"),
                        im(dir + "003.png", "Some dude on a bike"),
                        im(dir + "004.png", "Balloons"),
                        im(dir + "005.png", "Random pic 5")];

    var el = document.getElementById('random_image');
    var r = getRandomInt(0, 4);
    el.setAttribute('src', RandomImages[r].src);
    el.setAttribute('alt', RandomImages[r].alt);
    el.setAttribute('title', RandomImages[r].alt);
}

**djr33** · 05-30-2012, 01:09 AM

Additionally, this is not very hard to do if you can use a serverside language to get a list of the images that are there. Your post sounds discouraging about that, ApacheTech, but it's very easy to do and will save time manually listing the images in Javascript (what if there are hundreds or thousands?). Also, using a serverside language eliminates the dependence on Javascript, which might not work for everyone, and will make the page faster and use the processor less. Assuming a serverside language is available, it really is the better (maybe slightly more difficult) solution.

We just need more info from the original poster, to find out what languages are available, etc. (Sometimes it's best not to answer a question until extra information is given, so you don't waste your time with an answer that might not answer the question at all-- so far, here, we just don't know.)

**ApacheTech** · 05-30-2012, 02:07 AM

Originally Posted by jscheuer1

That will get you a random image, and a random alt and a random title. I think you meant:

...code...

which will select a random image and its alt property for the alt and title attributes.

Even then, I'm not sure you can co-opt javascript's native Image() function like that, probably not in at least some browsers, probably not in any

Apologies. As soon as I read your comment I knew the code you'd write, that was a stupid oversight on my part. For the second, I wasn't aware of the native Image() class, it would have been caught straight away in debug if I'd had VS open. Two oversights in one post, I'm really slacking. Won't happen again, boss. *salutes*

Note to self: Debug code in VS prior to posting rather than writing it raw in the quick reply box.

Thread: How to show pictures randomly from directory

Thread Tools

Search Thread

How to show pictures randomly from directory

Bookmarks

Bookmarks

Posting Permissions