How to show pictures randomly from directory [Archive]

View Full Version : 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:

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

Javascript:

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:

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

As the page loads:

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

When the image itself is clicked:

<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

Javascript:

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:

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:

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

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* :p ;)

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