Carousel Slideshow II - Custom controls?

[theforevernewb]

1) Script Title:
Carousel Slideshow II

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici.../carousel2.htm

3) Describe problem:
I'm trying to figure out how to add buttons for my users to speed up and slow down the slideshow without reloading. No javascript coder here, mostly a dummy, but I do get how to change the value of variables on the fly. It would be nice if I could also figure out how to reverse the direction on the fly too (changing the direction variable just messes the show up).

Any help / hints greatly appreciated!

[jscheuer1]

Use this modified version of the script:

<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()',cdiv.interval || 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.changespeed = function(speed){
  	params.speed = Math.min(30, Math.max(2, speed === 'faster'? params.speed + 2 : speed === 'slower'? params.speed - 2 : speed));
  	cdiv.interval = Math.floor(60000/params.sides/params.steps/params.speed)-5;
  }
  cdiv.onmouseover=function(){
    spinning=false;
    }
  cdiv.onmouseout=function(){
    spinning=true;
    }
  setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);
  }
carousel.changespeed = function(id, speed){
	document.getElementById(id.replace(/[^a-zA-Z0-9]+/g,'_')).changespeed(speed);
	return false;
}
</script>

Now you can have links like so:

<a href="#faster" onclick="return carousel.changespeed('Amazon Books 2', 'faster');">Faster</a> 
<a href="#slower" onclick="return carousel.changespeed('Amazon Books 2', 'slower');">Slower</a> 
<a href="#20" onclick="return carousel.changespeed('Amazon Books 2', 20);">20</a> 
<a href="#10" onclick="return carousel.changespeed('Amazon Books 2', 10);">10</a>

Notes:

The onclick attributes are required. The href attributes can be anything you want (it won't fire), and the text shown can be anything, it can even be an image:

<a href=["whatever"] onclick="return carousel.changespeed(['id of this carousel'], ['faster', 'slower', or a number]);">[any text or an img tag]</a>

Or you could make a button:

<input type="button" onclick="return carousel.changespeed('Amazon Books 2', 20);" value="20">

I set the minimum speed to 2. 0 causes it to spin very fast and 1 is so slow, I thought to skip it as well. The maximum is 30, any faster than that and it's blinding. If you want to be able to stop it, different code could be made for that.

[theforevernewb]

Thanks!

I think I have a better idea of how this works now... I may be able to tweak it even further.