Random display image

This widget randomly chooses and displays a photo among all hidden photos list whenever a page is loaded. This feature is very useful in the case that you have several images but only one image should display within the limited place. Thus before a page is loaded, all photos are hidden and then one randomly chosen image will show up.

* This widget is also included in Pro Pack. Pro versions enable users to save and load their code with additional customizable options (+ caption, and refresh function).

Preview

Build your own

Input data in the fields below. (Your contents such as images, videos, and music can be anywhere on web. DropBox is recommended.)
Once you finish to insert contents please click "Verify every photo path" to get each correct photo dimension.
Click "Apply these settings", select the entire codes. Then, press Command + C (Mac) or Control + C (Windows) to copy.
Paste the source code into HTML snippet in iWeb. (Non-iWeb users can also copy & paste each code in the <head> and <body> to each tag.)

* Customize styles (input your desired widget width / height. All images size will be automatically adjusted.)

widget width widget height widget id

* Optional settings

where to open a link round border

* Insert contents

photo path

link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.random-img-container {
	/*widget_width*/width:300px;
	/*widget_height*/height:250px;
	text-align:center;
}
.random-img-container img{
	max-width:100%;
	max-height:100%;
	border:none;
}
.random-img-container img {/*var_round_border*/}
</style>
</head>
<body style="background: transparent; margin: 0pt;">
<!--RANDOM DISPLAY IMAGE BEGIN--><!--RANDOM DISPLAY IMAGE END-->
<script type="text/javascript">
function random_imglink(w){
	/*var_target_window*/var target_window="_top";
	var random_img_array=[/*begin to insert contents*/
	/*end to insert contents*/];
  	var ry=Math.floor(Math.random()*random_img_array.length);
  	if (random_img_array[ry].link){document.getElementById(w).innerHTML='<a href="'+random_img_array[ry].link+'" target="'+target_window+'"><img src="'+random_img_array[ry].image+'" /></a>';}else{document.getElementById(w).innerHTML='<img src="'+random_img_array[ry].image+'" />';}
}
random_imglink(/*var_rdi_id*/"");
</script>
</body>
</html>

* Copy and paste this code above into HTML snippet (iWeb) or snippet (for other tools, follow "Installation Guide"), and see if it works on your web browser.

I am Preview

This live demo is dynamically loaded when you push "Apply these settings" button. This preview may not be same to the actual view in your website.
* Important! Don't click a link from this preview. It will make you leave this page out so that you may lose your own code.