Dynamic Drive DHTML Scripts- Carousel Slideshow II

FF1+ IE5+ Opr7+

Carousel Slideshow II

Note: Updated May 31st, 05' for link, frame/iframe targetting, plus open links in a custom pop window window instead.

Description: This carousel image slideshow, with its object oriented design, redefines robustness. The script supports vertical and horizontal scrolling, optional linking, title attributes, configurable visible sides, and more. Furthermore, multiple, different versions of this script can be invoked on the same page. Wow!

Demos:

Vertical Slideshow

Horizontal Slideshow (links open in popup called "mypop")

Directions

Step 1: Add the below script to the HEAD section of your page:

Select All
<script type='text/javascript'> /*********************************************** * Carousel Slideshow II- By Harry Armadillo (http://www.codingforums.com/showthread.php?t=58814) * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code * Please keep this notice intact ***********************************************/ function carousel(params){ if(!(params.width>0 && isFinite(params.width)))params.width=100; if(!(params.height>0 && isFinite(params.height)))params.height=100; if(!(params.sides>2 && isFinite(params.sides)))params.sides=4; if(!(params.steps>0 && params.steps<100 && isFinite(params.steps)))params.steps=20; if(!(params.speed>0 && isFinite(params.speed)))params.speed=8; if(!(params.image_border_width>=0 && isFinite(params.image_border_width)))params.image_border_width=0; if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random(); document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>"); var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_')) cdiv.style.width=params.width+'px'; cdiv.style.height=params.height+'px'; cdiv.style.border=params.border; cdiv.style.position='relative'; cdiv.style.overflow='hidden'; cdiv.title=params.id; var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5; interval=isNaN(interval)?200:interval; var img_position=[],images=[],img_dimension=[]; var img_index=params.images.length+1,img_index_cap=2*params.images.length; var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway; function init(){ if(params.direction=="left" || params.direction=="right"){ direction=params.direction; dimension="width"; } else if(params.direction=="top" || params.direction=="bottom"){ direction=params.direction; dimension="height"; } else { direction="left"; dimension="width"; } faraway=(direction=="left"||direction=="top")?'-20000px':'20000px'; cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px'; var img=new Image(); img.style.position='absolute'; img.style[direction]=faraway; img.style.width=params.width-2*params.image_border_width+'px'; img.style.height=params.height-2*params.image_border_width+'px'; img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color; for(var i=0;i<params.images.length;i++){ images[i]=img.cloneNode(true); images[i].src=params.images[i]; if(params.links && params.links[i] && params.links[i]!=''){ targ=params.lnk_targets && params.lnk_targets[i]||params.lnk_base||'new'; if(targ=="_blank"){ attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":""; images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")"); } else if(targ.substr(0,1)=="_"){ images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'"); } else{ attr=(params.lnk_attr && params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":""; images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()"); } images[i].style.cursor=document.all?'hand':'pointer'; } if(params.titles && params.titles[i] && params.titles[i]!='') images[i].title=params.titles[i]; if(document.all) images[i].alt=images[i].title; images[i+params.images.length]=images[i]; if(params.images.length==faces) images[i+2*params.images.length]=images[i]; cdiv.appendChild(images[i]); } var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides); var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5; var pi_piece=2*Math.PI/params.steps/params.sides; for(i=0;i<=params.steps*faces;i++){ img_dimension[i]=face_size*Math.sin(pi_piece*i); img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway; img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px'; } } init(); cdiv.rotate = function(){ setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval); if(!spinning) return; if(++counter>=params.steps){ counter=0; if(++img_index>=img_index_cap) img_index=params.images.length; } images[img_index-faces].style[direction]=faraway; for(var i=faces-1;i>=0;i--){ images[img_index-i].style[direction]=img_position[counter+i*params.steps]; images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps]; } } cdiv.onmouseover=function(){ spinning=false; } cdiv.onmouseout=function(){ spinning=true; } setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100); } </script>

Step 2: Insert the below into the BODY section of your page:

Select All
See this thread for detailed info and docs on script: <a href="http://www.codingforums.com/showthread.php?t=58814">http://www.codingforums.com/showthread.php?t=58814</a> <div style="margin-top: 1em; font-weight: bold;">1) Horizontal Slideshow:</div> Each image hyperlinked and opens in same browser. <script type='text/javascript'> carousel({id:'Amazon Books', //Enter arbitrary but unique ID of this slideshow instance border:'', size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below. width:107, //Enter width of image or entire carousel, depending on above value height:140, //Enter height of image or entire carousel, depending on above value sides:6, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best steps:23, //# of animation steps. More = smoother, but more CPU intensive speed:5, //Speed of slideshow. Larger = faster. direction:'left', //Direction of slideshow. Enter "top", "bottom", "left", or "right" images:['http://images.amazon.com/images/P/0596004672.01.MZZZZZZZ.jpg', 'http://images.amazon.com/images/P/0201730847.01.MZZZZZZZ.jpg', 'http://images.amazon.com/images/P/0201735687.01.MZZZZZZZ.jpg', 'http://images.amazon.com/images/P/0596005768.01._SCMZZZZZZZ_.jpg'], links: ['http://www.dynamicdrive.com', //enter link URLs, or for no links, empty array instead (links :[]) 'http://www.javascriptkit.com', 'http://www.codingforums.com', 'http://www.cssdrive.com'], titles:['Book #1', 'Book #2', 'Book #3', 'Book #4'], image_border_width:1, image_border_color:'blue' }); </script> <div style="margin-top: 1em; font-weight: bold;">2) Horizontal Slideshow:</div> Each image hyperlinked and opens in the new, set window (target="_blank") <script type='text/javascript'> carousel({id:'Amazon Books 2', border:'', size_mode:'image', width:107, height:140, sides:6, steps:23, speed:5, direction:'left', images:['http://images.amazon.com/images/P/0596004672.01.MZZZZZZZ.jpg', 'http://images.amazon.com/images/P/0201730847.01.MZZZZZZZ.jpg', 'http://images.amazon.com/images/P/0201735687.01.MZZZZZZZ.jpg', 'http://images.amazon.com/images/P/0596005768.01._SCMZZZZZZZ_.jpg'], links: ['http://www.dynamicdrive.com', 'http://www.javascriptkit.com', 'http://www.codingforums.com', 'http://www.cssdrive.com'], lnk_base:'google', //Link target for all links (see: http://www.codingforums.com/showthread.php?t=58814&page=2) titles:['Book #1', 'Book #2', 'Book #3', 'Book #4'], image_border_width:1, image_border_color:'blue' }); </script> <div style="margin-top: 1em; font-weight: bold;">3) Vertical Slideshow</div> Each image is hyperlinked and opens in a pop up window or iframe. 1st and 2nd image opens in the same popup window called "photo", 3rd image a _blank widnow, and 4th image, in the iframe following called "steve". Each pop up window's attributes can be customized, such as no toolbars, width/dimension etc. <script type='text/javascript'> carousel({id:'carousel_3', border:'', size_mode:'image', width:107, height:140, sides:8, steps:8, speed:7, direction:'top', images:['http://images.amazon.com/images/P/0596004672.01.MZZZZZZZ.jpg', 'http://images.amazon.com/images/P/0201730847.01.MZZZZZZZ.jpg', 'http://images.amazon.com/images/P/0201735687.01.MZZZZZZZ.jpg', 'http://images.amazon.com/images/P/0596005768.01._SCMZZZZZZZ_.jpg'], links: ['http://www.dynamicdrive.com', 'http://www.javascriptkit.com', 'http://www.codingforums.com', 'http://www.cssdrive.com'], lnk_base:'', lnk_targets:['photo', //link target for each link (see: http://www.codingforums.com/showthread.php?t=58814&page=2) 'photo', '_blank', '_top.steve' ], lnk_attr:['width=700,height=600,top=200,menubar=yes', //window attribute for each pop up (see url above for docs) 'width=700,height=600,left=400,scrollbars=yes', 'width=750,height=550,left=300,top=100', ''], titles:['Opens in \'photo\' window', 'Opens in \'photo\' window', 'Opens in blank window', 'Opens in iframe called "steve"'], image_border_width:1, image_border_color:'black' }); </script> <iframe name="steve" style="width: 80%; height: 400px"></iframe>

The code of Step 2 demonstrates how to add either a horizontal or vertical carousel slideshow. Refer to the comments alongside each parameter to see how to customize this script in numerous ways.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post