0

Possible Duplicate:
Javascript hard refresh of current page

I have a random image javascript that loads a random image on page load. I would like to load another random image when clicking a link named "Random image". Here is the page: http://www.heybrian.com/

The way it is now, the "Random image" link just refreshes the entire page which pulls in a new random image.

EDIT:

Below is the (truncated) javascript code. Please note that there are about 100 random photos that can load, but I've only included four, to simplify:

images = new Array(99);

images[0] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/thailand/2004/ko_tao.php'><img src='lib/images/travels/thailand/2004/ko_tao_mango_bay.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Mango Bay (Taa Toh Bay), Ko Tao &mdash; April 9, 2004</h4>";

images[1] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/france'><img src='lib/images/travels/france/eiffel_close.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>La Tour Eiffel, Paris, France &mdash; November 26, 2006</h4>";

images[2] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/china/2007/hangzhou.php'><img src='lib/images/travels/china/2007/hangzhou_gold_buddha.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Buddha image,  Língyǐn Temple <span lang='zh' xml:lang='zh'>灵隐寺</span>, Hángzhōu, China &mdash; August 2, 2007</h4>";

images[3] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href = 'travels/sri_lanka'><img src='lib/images/travels/sri_lanka/elephant_baby_wide.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Baby at the elephant breeding center, Kandy, Sri Lanka</h4>";

images[4] = "<div id='content_white_border' style='border: 1px white solid;'><div id='content_photo'><a href='travels/mongolia/'><img src='lib/images/travels/mongolia/man_baby_3_wide.jpg' alt='' width='956' height='512' border='0' /></a></div></div><h4>Mongol and his baby, Mongolia &mdash; July 2006</h4>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
Community
  • 1
  • 1
Brian Johnson
  • 131
  • 2
  • 11

3 Answers3

0

If you know all the images you have available to pick from, you can put them in an array and pick one at random when the button is loaded entirely in Javascript: 

var imgs = ["a.jpg", "b.jpg", "c.jpg"];

function pickImage()
{
    var idx = parseInt(Math.floor(Math.random() * imgs.length), 10);
    document.getElementById("random_image").src = imgs[idx];
}

If you don't want to put the array of images in Javascript, then you need to use AJAX to make a call to the server. The server would then determine which image should be displayed, and return the path to the browser.

Zach Rattner
  • 20,745
  • 9
  • 59
  • 82
  • Zach, I could put the images in an array like yours above, however, I think they are already in an array (as seen in the js code I just added above.) Would it still be possible to use this code that you provided? – Brian Johnson Jan 04 '13 at 07:20
  • It won't be the exact code that he posted because you are trying to change significantly more than an image. But yes, you can use code similar to insert into the DOM you HTML strings from your array. Given that, it probably makes more sense to construct the DOM objects from the beginning and either only attach them to the `document` or only show them when necessary. – Andrew Hubbs Jan 04 '13 at 07:29
  • Andrew, I'm not sure I understand. I have tried using modified jquery slide plugin, but because of my amount of random images (and their size) combined with the current site directory structure, slide won't work at this point. As for making DOM objects, and showing them when necessary, how could this be done? – Brian Johnson Jan 04 '13 at 07:39
0

You shouldn't use location.reload() on the "Random Image" link. Instead use JavaScript to add the image content:

var link = document.getElementById('id_for_random_image_link');
link.addEventListener("click", function(evt){ 
   // code to insert your image
}, false);

Also, you shouldn't use document.write(); it's inefficient when all you want is to replace the image within <div id="content_photo"> with new image. So instead you should remove all the HTML markups for <div id='content_white_border'><div id="content_photo"> in your JavaScript images array and turn the previous function into:

var link = document.getElementById('id_for_random_image_link');
link.addEventListener("click", function(evt){ 
   var index = Math.floor(Math.random() * images.length);
   document.getElementById('content_photo').innerHTML = images[index];
}, false);
SeanLi
  • 194
  • 2
0

Use an onclick event and change the SRC attribute randomly;

stay DRY: remove all the repeatative muddy HTML from your JS and put it in the document body ,leaving only the file names, and any other variating data (such as href) in the array. you can use an array of objects:

var imgs = [
{name:"some_img.jpg",
 href:"dir\some.php"},
{name:"another_img.jpg",
 href:"direct\something.php"},
{name:"yet_antoher_img.jpg",
 href:"directory\some.php"}];

Then use JQuery to replace the image SRC and other attributes and content as necessary. Simplified structure:

 $("button").onclick(function(){
   index = Math.floor(Math.random() * imgs.length);
   current = imgs[index];
   $("a").attr("href",current.href);
   $("img").attr("src",current.name);
    });
Matanya
  • 6,233
  • 9
  • 47
  • 80