onClick image sequence

JavaScript
1

I am creating a little portal for my design department at work. On the homepage of the portal, there is a section for a random image that people can submit. This image has a preset width and height so it fits into the layout. When you load the index page, it randomly selects one of the images from the database. However, I want people to be able to click on the image and load a different one. I don’t want to reload the entire page and get a new randomly selected one because it is possible they could keep getting the same image over and over. If they random get image #5, I want them to see image #6 when they click, then image #7 when they click again, so on and so forth. When they reach the last image, they go back to image #1. Make sense?

Any ideas? I have tried looking at scripts that automatically change the image (with cute little fade ins), but I want the change to happen based on the user’s actions.

2 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

#demo { font:11px verdana; padding:2px; background: buttonface; }
img { width:56px; height:67px; border:3px buttonface dashed; padding:2px; cursor:crosshair;}
a { display:block; width:56px; margin:200px auto; cursor:crosshair; }

</style>
<script type="text/javascript">
var pixloop = {nextpix: function(){return;}}; //placeholder
</script>
</head>
<body>
<span id="demo">&nbsp;</span>
<a href="#" onclick="return pixloop.nextpix()">
<img id="rotatepic" title="click to change" src="http://www-personal.umich.edu/~widmeyer/images/dot_clear.gif" />
</a>
<script type="text/javascript" src="PixLoop.js"></script>
<script type="text/javascript">
pixloop = new PixLoop();
</script>
</body>
</html>

[PixLoop.js]


PixLoop.prototype.pix_urls = [ 
				'http://www.SitePoint.com/graphics/v2/heads/default3.jpg' , 
				'http://www.SitePoint.com/graphics/author_andrew.jpg' , 
				'http://www.SitePoint.com/graphics/nigel.jpg' , 
				'http://www.SitePoint.com/graphics/author_ivan.jpg' ,
				'http://www.SitePoint.com/graphics/mike.jpg' , 
				'http://www.SitePoint.com/graphics/1kev.jpg' , 
				'http://www.SitePoint.com/graphics/author_josh.jpg' ,
				'http://www.SitePoint.com/graphics/1danielk.jpg' , 
				'http://www.SitePoint.com/graphics/patrick.jpg' 
			     ];

PixLoop.prototype.img_id = 'rotatepic';
PixLoop.prototype.winflag = 'CURRENT_IMAGE_IDX_';

function PixLoop()
{
	this.preload_obj = null;
	this.pix_el = null;
	this.pix_num = this.pix_urls.length;
	this.namechk = new RegExp(this.winflag + '\\\\d+');

	this.init = function()
	{
		this.next_pix_idx = Math.floor(Math.random() * this.pix_num);
		self.name = String(this.winflag + this.next_pix_idx);
		this.nextpix();
	}

	this.nextpix = function()
	{
		this.next_pix_idx = Number(self.name.split(this.winflag)[1]);
		if (this.pix_el = document.getElementById(this.img_id))
			this.pix_el.src = this.pix_urls[this.next_pix_idx];
		document.getElementById('demo').firstChild.data = '[' + this.next_pix_idx + '] ' + this.pix_el.src; //demo, remove
		this.next_pix_idx = (++this.next_pix_idx == this.pix_num) ? 0 : this.next_pix_idx;
		self.name = String(this.winflag + this.next_pix_idx);
		this.preload_obj = new Image();
		this.preload_obj.src = this.pix_urls[this.next_pix_idx];
		return false;
	}

	if (!this.namechk.test(self.name))
		this.init();
	else this.nextpix();
}

You’ll need a 1-pixel (or appropriate size) transparent gif to load as a placeholder.

3

I can’t get this to work to save my life :frowning:

4

Can’t get what to work? :confused:

5

The script. I try it, and nothing happens. The only difference is that I create the list of files dynamically so I can’t use an external JS file. Instead, I just put it all in the <head> tag.

6

The only difference is that I… just put it all in the <head> tag.
Well…that’s quite a difference. :agree:

[COLOR=SlateGray]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

#demo {
	font: normal 11px verdana, arial, sans-serif;
	padding: 2px;
	background: buttonface;
	border: 1px #888 solid;
	}
img {
	width: 56px;
	height: 67px;
	padding: 2px;
	border: 3px buttonface dashed;
	cursor: crosshair;
	}
a {
	display: block;
	width: 56px;
	margin: 200px auto;
	cursor: crosshair;
	}

</style>
<script type="text/javascript">

PixLoop.prototype.pix_urls = [ 
				'http://www.SitePoint.com/graphics/v2/heads/default3.jpg' , 
				'http://www.SitePoint.com/graphics/author_andrew.jpg' , 
				'http://www.SitePoint.com/graphics/nigel.jpg' , 
				'http://www.SitePoint.com/graphics/author_ivan.jpg' ,
				'http://www.SitePoint.com/graphics/mike.jpg' , 
				'http://www.SitePoint.com/graphics/1kev.jpg' , 
				'http://www.SitePoint.com/graphics/author_josh.jpg' ,
				'http://www.SitePoint.com/graphics/1danielk.jpg' , 
				'http://www.SitePoint.com/graphics/patrick.jpg' 
			     ];

PixLoop.prototype.img_id = 'rotatepic';
PixLoop.prototype.winflag = 'CURRENT_IMAGE_IDX_';

function PixLoop()
{
	this.preload_obj = null;
	this.pix_el = null;
	this.pix_num = this.pix_urls.length;
	this.namechk = new RegExp(this.winflag + '\\\\d+');

	this.init = function()
	{
		this.next_pix_idx = Math.floor(Math.random() * this.pix_num);
		self.name = String(this.winflag + this.next_pix_idx);
		this.nextpix();
	}

	this.nextpix = function()
	{
		this.next_pix_idx = Number(self.name.split(this.winflag)[1]);
		if (this.pix_el = document.getElementById(this.img_id))
			this.pix_el.src = this.pix_urls[this.next_pix_idx];
		document.getElementById('demo').firstChild.data = '[' + this.next_pix_idx + '] ' + this.pix_el.src; //demo, remove
		this.next_pix_idx = (++this.next_pix_idx == this.pix_num) ? 0 : this.next_pix_idx;
		self.name = String(this.winflag + this.next_pix_idx);
		this.preload_obj = new Image();
		this.preload_obj.src = this.pix_urls[this.next_pix_idx];
		return false;
	}

	if (!this.namechk.test(self.name))
		this.init();
	else this.nextpix();
}

[b][color=blue]onload[/color][/b] = function()
{
	pixloop = new PixLoop();
}

</script>
</head>
<body>
<span id="demo">&nbsp;</span>
<a href="#" onclick="return pixloop.nextpix()">
<img id="rotatepic" title="click to change" src="http://www-personal.umich.edu/~widmeyer/images/dot_clear.gif" />
</a>
</body>
</html>
[/color]
7

I realize this thread is ancient, but I’m so glad I found it because this script is exactly what I need. Works like a charm too (even in FireFox and Google Chrome).

The only thing I need is some hint as to how (or if) it might be possible to insert multiple instances of the PixLoop into a single page.
At the moment I have each picture sequence on its own separate page, and they’re embedded into the main page with iFrames. It works, but it’s definitely not an ideal set-up.
So any help or advice, on how to eliminate the iFrames and insert multiple PixLoops directly into the page, would be greatly appreciated.

Thanks.

PS: In my current set-up with the iFrames, the script for each PixLoop is embedded into the HEAD of the page that holds the picture sequence.
The PixLoop.js version keeps giving me an “invalid character” warning for the first character on line 1