Loading

Random Images and Content for Ecommerce Sites

by C Douglass on May 29, 2009

Subscribe

Tags : , ...

Categories : Coding Tips,Design,Smart E-Commerce




Have you ever wanted to have images or content rotate on your site? It is a common trend for ecommerce sites to have images or blocks of content on the home page highlighting new product lines or special offers. This article will provide an example of how make images or blocks of content randomly change when the page is refreshed.

Rotating Images

In this example, refreshing the page will present one of the Featured Section Images randomly.

View Rotating Image Example

Explanation of the code used:

Paste this javascript code between the ‘head’ tags of the page you want to add it to.

<script type="text/javascript">

function random_image() {
	if (document.images)
	{
		 // counter
		 var i = 0;

		 // create object
		 imageObj = new Image();

		 // set image list
		 images = new Array();

		 images[0]="featured_image1.gif"
		 images[1]="featured_image2.gif"
		 images[2]="featured_image3.gif"

		 // start preloading
		 for(i=0; i<=images.length; i++)
		 {
			  imageObj.src=images[i];
		 }
	}

	var random_image_number = "";
	var max = images.length;
	random_image_number += Math.floor(Math.random()*max);
	document.write('');
}

</script>

Starting with ‘images[0]=”featured_image1.gif”’, make sure the file name references match the names of the images you are using.

Paste this code in the place in the page where you want your random images to be displayed.

<script type="text/javascript">
random_image();
</script>

Rotating Content

In this example refreshing the page will present one of the Featured Content Boxes randomly.

View Rotating Content Example

Explanation of the code used:

Paste this javascript code between the ‘head’ tags of the page you want to add it too.

<script type="text/javascript">

function random_div() {
var random_number = "";
var max = 3; // this is the number of random content boxes you want to rotate
random_number += Math.floor(Math.random()*max+1);
showdiv = "featured_section" + random_number;
document.getElementById(showdiv).style.display = 'block';
}
</script>

Paste this code in the place on the page where you want your random images to be displayed.

<h1>Random Div</h1>

<!--News Section 1-->
<div id="featured_section1" style="display:none">
<img src="news_image1.gif" alt="news" />
<p><strong>Interesting News 1</strong></p>

Random Div 1 - You can put your text, images, links or videos in this box.
<br />
</div>

<!--News Section 2-->
<div id="featured_section2" style="display:none">
<img src="news_image2.gif" alt="news" />
<p><strong>Interesting News 2</strong></p>

Random Div 2 - You can put your text, images, links or videos in this box.
<br />
</div>

<!--News Section 3-->
<div id="featured_section3" style="display:none">
<img src="news_image3.gif" alt="news" />
<p><strong>Interesting News >/strong></p>

Random Div 3 - You can put your text, images, links or videos in this box.
<br />
</div>

If you want to add more random content boxes to the rotation you would name them ‘featured_section4′, ‘featured_section5′, and so on.

In order to style the content areas in a similar way you can go to File – View Source on the example page and copy the CSS code including the ‘style’ tags. From there you can paste the code between the ‘head’ tags of your page.

This code should help keep your site fresh, highlight some of your special offers and hopefully increase your sales.

Find us on Facebook and follow us on Twitter for more posts like this!

Brought to you by Network Solutions®, a Web.com® service.

Related Posts