Full version: jsB@nk » Image » Slideshow » Carousel Slideshow II
URL: https://www.javascriptbank.com/carousel-slideshow-ii.html
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 JavaScript can be invoked on the same page.
Full version: jsB@nk » Image » Slideshow » Carousel Slideshow II
URL: https://www.javascriptbank.com/carousel-slideshow-ii.html
<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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div style="margin-top: 1em;"><b>1) Horizontal Slideshow:</b>Each image hyperlinked and opens in same browser.</div><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:['logojs.gif', 'logojs.gif', 'logojs.gif','logojs.gif'], links: ['http://www.JavaScriptBank.com', //enter link URLs, or for no links, empty array instead (links :[])'http://www.JavaScriptBank.com','http://www.JavaScriptBank.com','http://www.JavaScriptBank.com'], titles:['Book #1','Book #2','Book #3','Book #4'], image_border_width:1, image_border_color:'blue' });</script><div style="margin-top: 1em;"><b>2) Horizontal Slideshow:</b>Each image hyperlinked and opens in the new, set window (target="_blank")</div><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:['logojs.gif', 'logojs.gif', 'logojs.gif','logojs.gif'], links: ['http://www.JavaScriptBank.com','http://www.JavaScriptBank.com','http://www.JavaScriptBank.com','http://www.JavaScriptBank.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.<div style="width: 160px; text-align: left;"><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:['logojs.gif', 'logojs.gif', 'logojs.gif','logojs.gif'], links: ['http://www.JavaScriptBank.com','http://www.JavaScriptBank.com','http://www.JavaScriptBank.com','http://www.JavaScriptBank.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></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->