SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Image Rotator

  1. #1
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image Rotator

    Hi,

    I need an image rotator for my homepage, so that 1 of 3 images is randomly shown on each visit. Has anybody ever done that before or can point me into the right direction? That would be fantastic :-)

    Cheers!

  2. #2
    Mad Beach Bum jgsketch's Avatar
    Join Date
    Aug 2002
    Location
    FL
    Posts
    825
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at my site www.expressivecandles.com. I have a image rotator on the front page. Here is the script I use.
    Code:
    <script language="JavaScript1.2">
    /***********************************************
    * Flexi Slideshow-  Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    var variableslide=new Array()
    //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
    variableslide[0]=['http://www.xxx.com/images/rotate3.jpg', 'http://www.xxx.com/candles.php', '']
    variableslide[1]=['http://www.xxx.com/images/rotate4.jpg', 'http://www.xxx.com/favors.php', '']
    variableslide[2]=['http://www.xxx.com/images/rotate12.jpg', 'http://www.xxx.com/floating.php', '']
    variableslide[3]=['http://www.xxx.com/images/rotate6.jpg', 'http://www.xxx.com/canning8oz.php', '']
     
    //configure the below 3 variables to set the dimension/background color of the slideshow
    var slidewidth='250px' //set to width of LARGEST image in your slideshow
    var slideheight='250px' //set to height of LARGEST iamge in your slideshow, plus any text description
    var slidebgcolor='white'
    //configure the below variable to determine the delay between image rotations (in miliseconds)
    var slidedelay=4500
     
    ////Do not edit pass this line////////////////
    var ie=document.all
    var dom=document.getElementById
    for (i=0;i<variableslide.length;i++){
    var cacheimage=new Image()
    cacheimage.src=variableslide[i][0]
    }
    var currentslide=0
    function rotateimages(){
    contentcontainer='<center>'
    if (variableslide[currentslide][1]!="")
    contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
    contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
    if (variableslide[currentslide][1]!="")
    contentcontainer+='</a>'
    contentcontainer+='</center>'
    if (variableslide[currentslide][2]!="")
    contentcontainer+=variableslide[currentslide][2]
    if (document.layers){
    crossrotateobj.document.write(contentcontainer)
    crossrotateobj.document.close()
    }
    else if (ie||dom)
    crossrotateobj.innerHTML=contentcontainer
    if (currentslide==variableslide.length-1) currentslide=0
    else currentslide++
    setTimeout("rotateimages()",slidedelay)
    }
    if (ie||dom)
    document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
    function start_slider(){
    crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
    if (document.layers)
    document.slidensmain.visibility="show"
    rotateimages()
    }
    if (ie||dom)
    start_slider()
    else if (document.layers)
    window.onload=start_slider
    </script>

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This might be simpler if your don't need to have the links change as well:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Untitled Page</title>
    		<script type="text/javascript"><!--
    var rInterval = 2000; //time im ms, 1000 = 1second
    var rImgs = [ //your images
    	"http://www.suzukicycles.com/images/ProductImages/colorVariations/500/GSXR600K6_RedBlack_D31F1C.jpg",
    	"http://www.suzukicycles.com/images/ProductImages/colorVariations/500/GSXR600K6_BlackGray_000000.jpg",
    	"http://www.suzukicycles.com/images/ProductImages/colorVariations/500/GSXR600K6_SilverWhite_768594.jpg",
    	"http://www.suzukicycles.com/images/ProductImages/colorVariations/500/GSXR600K6_aWhiteBlue_004C9F.jpg"
    ]
    
    var count = 0;
    
    function rotate() {
    	document.getElementById("rotator").src = rImgs[count];
    	setTimeout(rotate, rInterval);
    	if (count < rImgs.length-1) {
    		count++;
    	} else {
    		count = 0;
    	}
    }
    if (document.getElementById) {
    	window.onload = rotate;
    }
    //-->
    </script>
    	</head>
    
    	<body>
    		<img src="http://www.suzukicycles.com/images/ProductImages/colorVariations/500/GSXR600K6_RedBlack_D31F1C.jpg" alt="Image Description" id="rotator">
    	</body>
    
    </html>

    EDIT: actually if you want rotating links, this is still simpler:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    		<title>Untitled Page</title>
    		<script type="text/javascript"><!--
    var rInterval = 2000; //time im ms, 1000 = 1second
    var rImgs = [ //your images
    	[
    		"http://www.suzukicycles.com/images/ProductImages/colorVariations/500/GSXR600K6_RedBlack_D31F1C.jpg",
    		"link1.html"
    	],[
    		"http://www.suzukicycles.com/images/ProductImages/colorVariations/500/GSXR600K6_BlackGray_000000.jpg",
    		"link2.html"
    	],[
    		"http://www.suzukicycles.com/images/ProductImages/colorVariations/500/GSXR600K6_SilverWhite_768594.jpg",
    		"link3.html"
    	],[
    		"http://www.suzukicycles.com/images/ProductImages/colorVariations/500/GSXR600K6_aWhiteBlue_004C9F.jpg",
    		"link4.html"
    	]
    ]
    
    var count = 0;
    
    function rotate() {
    	document.getElementById("rotatorImg").src = rImgs[count][0];
    	document.getElementById("rotatorLink").href = rImgs[count][1];
    	setTimeout(rotate, rInterval);
    	if (count < rImgs.length-1) {
    		count++;
    	} else {
    		count = 0;
    	}
    }
    if (document.getElementById) {
    	window.onload = rotate;
    }
    //-->
    </script>
    	</head>
    
    	<body>
    		<a href="1.html" id="rotatorLink"><img src="http://www.suzukicycles.com/images/ProductImages/colorVariations/500/GSXR600K6_RedBlack_D31F1C.jpg" alt="Image Description" id="rotatorImg"></a>
    	</body>
    
    </html>
    You don't need to re-write the code every time like in the example above me, just change the attributes that are already there.

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a good link to some, they'll do whatever I want and are the best ones I've seen. image rotators
    Last edited by 1Jen; Feb 17, 2007 at 01:59.

  5. #5
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, thanks you guys. Your help is really appreciated!!! :-)


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
  •