Hand off variable to html

Question

So instead paying $35 for slideshowpro for lightroom, I just decided to whip up a quick javascript slideshow to do a simple task. Rotate 10 images within a div, randomly. It works like so:

var imageSrc = "source_folder/";
var imageType = ".jpg";
var randomImage = imageSrc + 0 + Math.floor(#*Math.random()) + imageType;

(This isn't all the code, I've left out the rest)

How do I take randomImage and insert into an <img> tag.

src="randomImage" will not work.

Answer 1

Don't use the string "randomImage", use the variable:

image.src = randomImage

This is just setting the src to the path of the current image. There will be a delay as the images are loading. You could preload paths using new Image().src = [path], or use image sprites and css clip to make it more seamless.

Answer 2

I highly recommend jQuery and the Cycle plugin.

Answer 3

var imageSrc = "source_folder/";
var imageType = ".jpg";
var randomImage = imageSrc + 0 + Math.floor(#*Math.random()) + imageType;
document.getElementById('booba').src=randomImage;

....
....
....

<img id='booba' />

And if you want to be noty (not a good practice, but should work)

<img src='javascript:this.src=randomImage' />