« »

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.

Label: Carousel Slideshow II

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<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
	-->

Copy All x2

<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=&quot;_blank&quot;)</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 &quot;photo&quot;, 3rd image a _blank widnow, 
and 4th image, in the iframe following called &quot;steve&quot;. Each pop up window&#39;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
	-->