SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Dec 2001
    Location
    San Diego, CA
    Posts
    617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onClick image sequence

    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. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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]
    Code:
    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.
    Last edited by adios; Apr 23, 2004 at 00:35.
    ::: certified wild guess :::

  3. #3
    SitePoint Guru
    Join Date
    Dec 2001
    Location
    San Diego, CA
    Posts
    617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't get this to work to save my life

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't get what to work?
    ::: certified wild guess :::

  5. #5
    SitePoint Guru
    Join Date
    Dec 2001
    Location
    San Diego, CA
    Posts
    617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only difference is that I... just put it all in the <head> tag.
    Well...that's quite a difference.
    Code:
    
    <!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();
    }
    
    onload = 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>
    
    ::: certified wild guess :::

  7. #7
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •