Web Analytics Made Easy -
StatCounter Image rotator - CodingForum

Announcement

Collapse
No announcement yet.

Image rotator

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Image rotator

    Please can anyone help me with a script (javascript or DHTML) to ratate a series of random images in a page everytime it loads.... all the images will be of same dimensions.

  • #2
    so...you're asking for a slide show? The following code is something I wrote a while back, you may have to modify the init() function to get it working the way you want on page load.

    PHP is used to read a directory and create the images keys for javascript if you're wondering how that is done. The below is an example of the code that gets sent to the browser (all inclusive example).

    You'll probably also have to pick through the code and find the "getElement(x)" lines - those are all divs with id's of the same name in the <body>. To see it in action you can visit this site where I installed it for a friend.
    Enjoy.

    Code:
    <script language="Javascript" type="text/javascript">
    	var images = new Array();
    	images[0] = {file:'DSC_0010.JPG',filesize:'2441',date:'August 14, 2006',name:'DSC 0010',description:'The Ocean view from outside our hotel in Maui.  Although our balcony didn\'t really exist, you can stand really close to the door and look out.',width:'600',height:'399'};
    	images[1] = {file:'DSC_0013.JPG',filesize:'2501',date:'August 14, 2006',name:'DSC 0013',description:'This is the view over looking the park next to the hotel.',width:'600',height:'399'};
    	images[2] = {file:'DSC_0021.JPG',filesize:'3039',date:'August 14, 2006',name:'DSC 0021',description:'',width:'600',height:'399'};
    	images[3] = {file:'DSC_0025.JPG',filesize:'2374',date:'August 14, 2006',name:'DSC 0025',description:'Sarah splashing in the water',width:'600',height:'399'};
    	images[4] = {file:'DSC_0029.JPG',filesize:'2331',date:'August 14, 2006',name:'DSC 0029',description:'Me playing in the water.',width:'600',height:'399'};
    	images[5] = {file:'DSC_0034.JPG',filesize:'2616',date:'August 14, 2006',name:'DSC 0034',description:'Sippin\' a mai tai in the pool.',width:'600',height:'399'};
    	images[6] = {file:'DSC_0038.JPG',filesize:'2874',date:'August 14, 2006',name:'DSC 0038',description:'Just loungin\' around',width:'600',height:'399'};
    	images[7] = {file:'DSC_0041.JPG',filesize:'2872',date:'August 14, 2006',name:'DSC 0041',description:'The sunset at the hotel beach',width:'600',height:'399'};
    	images[8] = {file:'DSC_0060.JPG',filesize:'2589',date:'August 14, 2006',name:'DSC 0060',description:'Biking down Haleakala very early in the morning.  I don\'t think I\'ve ever been that cold in my life.  It started to warm up as we were cruising down the volcano.',width:'600',height:'399'};
    	images[9] = {file:'DSC_0068.JPG',filesize:'2457',date:'August 14, 2006',name:'DSC 0068',description:'Just messing around taking pictures as we drove around the island.',width:'600',height:'399'};
    	images[10] = {file:'DSC_0110.JPG',filesize:'2078',date:'August 14, 2006',name:'DSC 0110',description:'',width:'600',height:'399'};
    	images[11] = {file:'IMG_1789.JPG',filesize:'1419',date:'August 14, 2006',name:'IMG 1789',description:'Grabbin\' drinks at the pool.  We spent a lot of time there, not going to lie.',width:'600',height:'450'};
    	images[12] = {file:'IMG_1795.JPG',filesize:'1183',date:'August 14, 2006',name:'IMG 1795',description:'',width:'600',height:'450'};
    	images[13] = {file:'IMG_1797.JPG',filesize:'1204',date:'August 14, 2006',name:'IMG 1797',description:'You sunk my battleship, er sailboat.',width:'600',height:'450'};
    	images[14] = {file:'IMG_1799.JPG',filesize:'1163',date:'August 14, 2006',name:'IMG 1799',description:'Getting ready for the luau in old Lahina.',width:'600',height:'450'};
    	images[15] = {file:'IMG_1806.JPG',filesize:'1401',date:'August 14, 2006',name:'IMG 1806',description:'Taking some shots at the luau.',width:'600',height:'450'};
    	images[16] = {file:'IMG_1811.JPG',filesize:'1658',date:'August 14, 2006',name:'IMG 1811',description:'',width:'600',height:'450'};
    	images[17] = {file:'IMG_1819.JPG',filesize:'1228',date:'August 14, 2006',name:'IMG 1819',description:'Our new Canadian friends. We went surfing with them one day and decided we should all hang out this night.',width:'600',height:'450'};
    	images[18] = {file:'IMG_1826.JPG',filesize:'1238',date:'August 14, 2006',name:'IMG 1826',description:'Sunset pics',width:'600',height:'450'};
    	images[19] = {file:'IMG_1828.JPG',filesize:'1593',date:'August 14, 2006',name:'IMG 1828',description:'And another...',width:'600',height:'450'};
    	images[20] = {file:'IMG_1832.JPG',filesize:'1233',date:'August 14, 2006',name:'IMG 1832',description:'Sarah overlooking the hotel pool',width:'600',height:'450'};
    	images[21] = {file:'IMG_1833.JPG',filesize:'1336',date:'August 14, 2006',name:'IMG 1833',description:'Jeff overlooking the hotel pool.',width:'600',height:'450'};
    	images[22] = {file:'IMG_1835.JPG',filesize:'984',date:'August 14, 2006',name:'IMG 1835',description:'',width:'600',height:'450'};
    	images[23] = {file:'IMG_1841.JPG',filesize:'1504',date:'August 14, 2006',name:'IMG 1841',description:'Our last night at dinner :(',width:'600',height:'450'};
    	var title_base 		= 'i heart sarah - Hawaii 2006 - ';
    	var timer			= undefined;
    	var key 			= 0;
    	var incriment 		= 3;
    	var paused 			= true;
    	var paused_text 	= '';
    	var playing_text	= ' - * Slideshow Mode *';
    	function init()
    	{
    		if(images.length == 0)
    		{
    			alert('No images were found.');
    			return;
    		}
    
    		control('first');
    	}
    	function load( key2 )
    	{
    		if( key2 == images.length )
    			key = 0;
    		else if( key2 < 0 )
    			key = parseInt( images.length-1 );
    		else
    			key = key2;
    
    		if ( images.length == 0 ) 
    		{
    			alert( 'There are no images available \nin this gallery.' );
    			return false;
    		}
    
    		getElement('image').innerHTML = 'Loading....';
    
    		document.title = title_base + images[key]['file'] + ' :: ' + ( key + 1 ) + ' of ' + images.length;
    		
    		if(paused)
    			document.title += paused_text;
    		else
    			document.title += playing_text;
    
    		getElement('image').innerHTML = '<a href="#" onclick="return control(\'next\');"><div id="viewer"><div id="viewer_inner"><img src="http://iheartsarahjo.com/cache/Hawaii-2006/' + images[key]['file'] + '" border="0" title="Click to view the next image"></a></div></div>';
    		getElement('image').style['height'] = images[key]['height']+'px';
    
    		if ( getElement('image_cell') != undefined )
    			getElement( 'image_cell' ).style['width'] = images[key]['width'] + 'px';
    
    		if ( getElement('direct_link') != undefined )
    			getElement('direct_link').innerHTML = '<a href="http://iheartsarahjo.com/cache/Hawaii-2006/' + images[key]['file'] + '" target="_directlink">Direct link</a>';
    
    		if ( getElement('full_link') != undefined )
    			getElement('full_link').innerHTML = '<a href="http://iheartsarahjo.com/galleries/Hawaii-2006/' + images[key]['file'] + '" target="_bigimg">View full quality image (' + images[key]['filesize'] + 'k)</a>';
    
    		if ( getElement('description') != undefined )
    			getElement('description').innerHTML = images[key]['description'];
    
    		if ( getElement('date') != undefined )
    			getElement('date').innerHTML = '<p class="date"><em>' + images[key]['name'] + '</em><br />Posted: ' + images[key]['date'] + '</p>';
    
    		return false;
    	}
    	function loop( key2 )
    	{
    		load( key2 );
    		timer = setTimeout('loop(' + parseInt( key+1 ) + ')',incriment + '000');
    		return false;
    	}
    	function control( mode )
    	{
    		clearTimeout(timer); // Stop the timer
    
    		switch ( mode )
    		{
    			case 'first':
    				paused = true;
    				load( 0 );
    			break;
    			case 'previous':
    				paused = true;
    				load( parseInt( key-1 ) );
    			break;
    			case 'next':
    				paused = true;
    				load( parseInt( key+1 ) );
    			break;
    			case 'last':
    				paused = true;
    				load( parseInt( images.length-1 ) );
    			break;
    			case 'slideshow':
    				if(paused)
    				{
    					paused = false;
    					document.title = document.title.replace(paused_text,playing_text);
    				}
    				else
    				{
    					paused = true;
    					document.title = document.title.replace(playing_text,paused_text);
    				}
    
    				if ( paused )
    				{
    					if(getElement('play_pause_text') != undefined)
    						getElement('play_pause_text').src = 'templates/css/pause.gif';
    				}
    				else
    				{
    					if(getElement('play_pause_text') != undefined)
    						getElement('play_pause_text').src = 'templates/css/play.gif';
    
    					loop( parseInt( key+1 ) );
    				}
    			break;
    			case 'exit':
    				window.close();
    			break;
    		}
    		return false;
    	}
    	var is=new function()
    	{ 	
    		this.VER=navigator.appVersion;
    		this.AGENT=navigator.userAgent;
    		this.DOM=(document.getElementById)?1:0;
    		this.IE4=(document.all&&!this.DOM)?1:0;
    		this.IE5=(this.VER.indexOf("MSIE 5")>-1&&this.DOM)?1:0; 
    		this.IE6=(this.VER.indexOf("MSIE 6")>-1&&this.DOM)?1:0;
    		this.IE=(this.IE4||this.IE5||this.IE6)?1:0;	
    		this.MAC=this.AGENT.indexOf("Mac")>-1;
    		this.NS6=(document.getElementById&&!document.all)?1:0;
    		this.NS4=(document.layers&&!this.DOM)?1:0;
    		this.NS=(this.NS6||this.NS4)?1:0;
    		this.OPERA=this.AGENT.indexOf("Opera")>-1;
    		return this;
    	};
    	function getElement(id)
    	{
    		if(is.DOM)
    		{
    			return document.getElementById(id);
    		}
    		else if(is.IE)
    		{
    			return eval("document.all."+id);
    		}
    		else if(is.NS)
    		{
    			return eval("document."+id);
    		};
    	};
    </script>
    Last edited by syosoft; Oct 2, 2006, 05:01 AM. Reason: Added more info.
    Active PHP/MySQL application developer available for immediate work.
    syosoft.com mavieo.com - Remote Web Site Administration Suite - Reseller Ready

    Comment

    Working...
    X