Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 8 123 ... LastLast
Results 1 to 15 of 117
  1. #1
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Carousel Slideshow

    A question was posted in the Dynamic Drive forum about this slideshow script. I liked the effect, but hated the scripting...so I reverse engineered it.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head><title>Carousel Slideshow</title>
    <script type='text/javascript'>
    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(/[\r\n\t ]+/g,'_')+"'></div>");
      var cdiv=document.getElementById(params.id.replace(/[\r\n\t ]+/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;
    
      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";
          }      
        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]='10000px';
        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]!=''){
            images[i].onclick=new Function("window.location='"+params.links[i]+"'");
            images[i].style.cursor=document.all?'hand':'pointer';
            }
          if(params.titles&&params.titles[i]&&params.titles[i]!='')
            images[i].title=params.titles[i];
          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':'10000px';
          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]='20000px';
        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()',200);
      }
    </script>
    </head><body>
    <div id=right_bar style='width:90px;float:right;'>
    <h4>Vertical!</h4>More steps (affects speed slightly)
    <script type='text/javascript'>
    carousel({id:'carousel_0',
              border:'',
              size_mode:'image',
              width:75,
              height:75,
              sides:18,
              steps:8,
              speed:7,
              direction:'top',
              images:['http://www.codingforums.com/images/icons/icon7.gif',
                      'http://www.codingforums.com/images/icons/icon8.gif',
                      'http://www.codingforums.com/images/icons/icon3.gif',
                      'http://www.codingforums.com/images/icons/icon4.gif',
                      'http://www.codingforums.com/images/icons/icon5.gif',
                      'http://www.codingforums.com/images/icons/icon9.gif',
                      'http://www.codingforums.com/images/icons/icon10.gif',
                      'http://www.codingforums.com/images/icons/icon13.gif',
                      'http://www.codingforums.com/images/icons/icon12.gif',
                      'http://www.codingforums.com/images/icons/icon11.gif',
                      'http://www.codingforums.com/images/icons/icon2.gif',
                      'http://www.codingforums.com/images/icons/icon6.gif'],
              links: [],
              titles:[],
              image_border_width:2,
              image_border_color:'black'
              });
    </script></div>
    <div id=right_pub style='width:90px;float:right;'>
    <h4>Vertical!</h4>Less steps (affects speed slightly)
    <script type='text/javascript'>
    carousel({id:'carousel_5',    
              border:'',
              size_mode:'carousel',
              width:75,
              height:430,
              sides:18,
              steps:4,
              speed:7,
              direction:'bottom',
              images:['http://www.codingforums.com/images/icons/icon7.gif',
                      'http://www.codingforums.com/images/icons/icon8.gif',
                      'http://www.codingforums.com/images/icons/icon3.gif',
                      'http://www.codingforums.com/images/icons/icon4.gif',
                      'http://www.codingforums.com/images/icons/icon5.gif',
                      'http://www.codingforums.com/images/icons/icon9.gif',
                      'http://www.codingforums.com/images/icons/icon10.gif',
                      'http://www.codingforums.com/images/icons/icon13.gif',
                      'http://www.codingforums.com/images/icons/icon12.gif',
                      'http://www.codingforums.com/images/icons/icon11.gif',
                      'http://www.codingforums.com/images/icons/icon2.gif',
                      'http://www.codingforums.com/images/icons/icon6.gif'],
              links: [],
              titles:[],
              image_border_width:2,
              image_border_color:'black'
              });
    </script></div><div id='header' style='height:175;padding:10px;background-color:#eee;width:570px'><div style='float:left'>
    <script type='text/javascript'>
    carousel({id:null, 
              border:'',
              size_mode:'image',
              width:{},
              height:'big',
              sides:'several',
              steps:8/0,
              speed:'really fast',
              direction:'whatever',
              images:['http://www.codingforums.com/images/icons/icon7.gif',
                      'http://www.codingforums.com/images/icons/icon8.gif',
                      'http://www.codingforums.com/images/icons/icon9.gif',
                      'http://www.codingforums.com/images/icons/icon10.gif',
                      'http://www.codingforums.com/images/icons/icon2.gif',
                      'http://www.codingforums.com/images/icons/icon3.gif',
                      'http://www.codingforums.com/images/icons/icon4.gif',
                      'http://www.codingforums.com/images/icons/icon5.gif',
                      'http://www.codingforums.com/images/icons/icon6.gif'],
              links: ['http://www.google.com/search?q=happy',
                      'http://www.google.com/search?q=angry',
                      'http://www.google.com/search?q=sad',
                      'http://www.google.com/search?q=big+grin',
                      'http://www.google.com/search?q=look+here',
                      'http://www.google.com/search?q=bright+idea',
                      'http://www.google.com/search?q=caution',
                      'http://www.google.com/search?q=question',
                      'http://www.google.com/search?q=cool'],
              titles:['Happy',
                      'Angry',
                      'Sad',
                      'Big Grin',
                      'Look Here',
                      'Bright Idea',
                      'Caution',
                      'Question',
                      'Cool!'],
              image_border_width:1,
              image_border_color:'red'
              });
    </script></div><div style='float:left'>
    <script type='text/javascript'>
    carousel({id:'carousel_2',
              border:'',
              size_mode:'carousel',
              width:144,
              height:100,
              sides:4,
              steps:20,
              speed:8,
              direction:'right',
              images:['http://www.codingforums.com/images/icons/icon7.gif',
                      'http://www.codingforums.com/images/icons/icon8.gif',
                      'http://www.codingforums.com/images/icons/icon9.gif',
                      'http://www.codingforums.com/images/icons/icon10.gif',
                      'http://www.codingforums.com/images/icons/icon2.gif',
                      'http://www.codingforums.com/images/icons/icon3.gif',
                      'http://www.codingforums.com/images/icons/icon4.gif',
                      'http://www.codingforums.com/images/icons/icon5.gif',
                      'http://www.codingforums.com/images/icons/icon6.gif'],
              links: ['http://www.google.com/search?q=happy',
                      'http://www.google.com/search?q=angry',
                      'http://www.google.com/search?q=sad',
                      'http://www.google.com/search?q=big+grin',
                      'http://www.google.com/search?q=look+here',
                      'http://www.google.com/search?q=bright+idea',
                      'http://www.google.com/search?q=caution',
                      'http://www.google.com/search?q=question',
                      'http://www.google.com/search?q=cool'],
              titles:['Happy',
                      'Angry',
                      'Sad',
                      'Big Grin',
                      'Look Here',
                      'Bright Idea',
                      'Caution',
                      'Question',
                      'Cool!'],
              image_border_width:1,
              image_border_color:'red'
              });
    </script></div><h1 style='float:right;'>Oooo, spinning!</h1><div style='clear:left'>
    <script type='text/javascript'>
    carousel({id:'carousel_7',
              border:'',
              size_mode:'carousel',
              width:287,
              height:35,
              sides:24,
              steps:5,
              speed:11,
              direction:'right',
              images:['http://www.codingforums.com/images/icons/icon7.gif',
                      'http://www.codingforums.com/images/icons/icon8.gif',
                      'http://www.codingforums.com/images/icons/icon3.gif',
                      'http://www.codingforums.com/images/icons/icon4.gif',
                      'http://www.codingforums.com/images/icons/icon5.gif',
                      'http://www.codingforums.com/images/icons/icon9.gif',
                      'http://www.codingforums.com/images/icons/icon10.gif',
                      'http://www.codingforums.com/images/icons/icon13.gif',
                      'http://www.codingforums.com/images/icons/icon12.gif',
                      'http://www.codingforums.com/images/icons/icon11.gif',
                      'http://www.codingforums.com/images/icons/icon2.gif',
                      'http://www.codingforums.com/images/icons/icon6.gif'],
              links: ['http://www.codingforums.com/',
                      'http://www.codingforums.com/',
                      'http://www.codingforums.com/',
                      'http://www.codingforums.com/'],
              titles:[],
              image_border_width:1,
              image_border_color:'blue'
              });
    </script></div>
    </div>
    <script type='text/javascript'>
    carousel({id:'Photos Courtesy of Dynamic Drive',
              border:'',
              size_mode:'image',
              width:138,
              height:225,
              sides:6,
              steps:23,
              speed:5,
              direction:'left',
              images:['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
                      'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
                      'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
                      'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
              links: ['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
                      'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
                      'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
                      'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
              titles:[],
              image_border_width:0,
              image_border_color:'blue'
              });
    </script>
    </body></html>
    Yes, it's a whopping big closure! Any other comments/suggestions?

    Edit: Now with vertical!
    Speed parameter altered - now roughly equals carousel rpm.

    Edit: New size_mode parameter! See posts below
    Last edited by Harry Armadillo; 05-16-2005 at 06:54 PM. Reason: Advancement

  • #2
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Very interesting! Can you quickly list the improvements or how it differs from the original version? I see that multiple copies of the script can be run on the same page...
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    That is really cool man. Good Job.

    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The biggest difference is the affect on the global-namespace. It uses no global variables, and only the one global function. This makes it absurdly unlikely that it will conflict with any other scripts on a page.

    Mine doesn't use the body or window onload events. Again, making it unlikely to clash with other scripts and making installation easier.

    This one let's you have a carousel with an arbitrary number of side; the DD script only allows 4/6/8/12 sides.

    In mine, I've tried to precompute as much as possible. The movement is done with a very fast update of the images' rights/lefts and widths, using values stored an array. The DD script does the same expensive floating point calcutions over and over, every 50ms, and constantly changes the src's of it's image element (necessitating more extensive DOM updates).

    What else did I do? Hmm...

  • #5
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Definitely sounds like a step up from the original script. I'll test it some more, though do you have any objections to this script being possbily posted on Dynamic Drive? If not, please let me know the credits (ie: name, site URL) you wish to be displayed alongside script.

    Thanks,
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I appreciate the offer of testing -- I whipped it out this morning in spare moments and have little doubt that a bug or two has escaped me.

    I'm fine with it finding a home at Dynamic Drive. I compartmentalize my web presence, so credit to Harry Armadillo is enough and perhaps a link to the forums here.

    Input on instructions/commenting would be highly useful. With my brain stuffed with the script's innermost secrets, its hard for me grasp what other people don't know but should. Take the previous sentence as an example of my explanation deficits....

  • #7
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Thanks for the permission. It probably will be two weeks before the script is featured on Dynamic Drive. I'll test it out in the meantime, and if you do make any changes to the script on your own (ie: bug fixes), please simply edit the above script to include this change.

    Thanks!
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts

    Nice script!

    There's an invalid argument error in IE. grey is different than gray unlike in FF. Actually, IE is inconsistent as lightgrey is correct and lightgray is wrong.
    Code:
    carousel({id:'carousel_2',
              border:'1px solid grey',
    BTW, Is there any special reason why you used document.write instead of createElement?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Grey, gray, bah! That's what I get for trying to save the extra tenth of a second a hex color would have needed. Thanks.

    I used document.write so that the carousel div would be a child of whatever element is desired, without needing the person building the page to specify the parent. I could have used a placeholder div like the original, but wanted to make installation as simple as possible -- insert the main script in the head, insert a function call where you want the slideshow. No need to worry about editing around onload conflicts, no questions about which arguments apply to which slideshow when using multiple

    Edit :: Thinking about the 'sticking the function call where ever you want' business made me realize something - it didn't fit very well into narrow columns. So...changes. Carousel slideshow, now featuring vertical action!
    Last edited by Harry Armadillo; 05-11-2005 at 08:54 AM.

  • #10
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Vertical option- very nice! BTW, what's the difference between "sides" and "steps" in the exposed parameters list?

    I see this script runs in Opera 7 as well, which is great. Efficiency wise, Firefox seems to render it the slowest, especially with the 3 slideshows you have running at the same time.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #11
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, it's odd how different browsers are faster at one thing, but slower at another. meh.

    Sides controls the number of sides on the carousel. Four for a cube, etc. Odd numbers work, but look a little funny since I can't do perspective and the rotational axis isn't obvious/visible (something to work on). Since only the front of the carousel is shown, there will be sides/2 images on screen at a time.

    Steps set how many intermediate steps are used in moving a picture one position forward. Say we had steps:16, then if picture-A is at the front, there would be 16 repositionings before its neighbor picture-B is in front. Too few steps will make the movement jerky, but will save processor power. More steps is more taxing, but smoother. Way too many steps will give a vibrating sort of look, due to rounding error and the finite size of a pixel.

    I like steps*sides of around 100-140. Gives a decent balance of smoothness and processing load.

    At the moment, speed doesn't take into account the number of steps (more steps will slow down the overall spin). I'm working on making the speed more independent; still trying to find a scheme I like.

    Edit: The carousel will now spin at a revolutions per minute rate roughly equal to the speed parameter. Due to differences in processing load, the same speed with different numbers of steps will result in slightly different net speeds (I've tries to compensate but machine/browser variances matter).
    Last edited by Harry Armadillo; 05-12-2005 at 03:12 PM.

  • #12
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    I've just tested this script some more. Some feedback:

    1) Does the links[] array work at the moment? I tried inputting URLs, but the images remain unlinked.

    2) In IE, users who have JS debugging turned on and misconfigure the script will be bombarded with errors. I'd recommend perhaps adding a line like:

    window.onerror=function(){if (document.all){window.status='An error has occured'; return true}}

    to the top of the script.

    3) It's difficult to get the slideshow to show the images in their original, undistorted dimension without a lot of trial and error with the width/height parameters. I think a good idea may be to just ask for the true dimension of the images (making the assumption each one is the same size), and then based on sides and direction, display an image slideshow with the ideal dimensions.

    I'm writing up the page for this script on DD, though may wait for the next revision when some of the above are solved before actually publishing it.

    Thanks!
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  • #13
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The link array ought be working...are you getting any error messages? The examples in the last update didn't have links included, did you stick some in for yourself? I've added google links to the pair of cube examples, and also added the link-indicating hand/pointer mouse-cursor.

    I'm loath to mask all errors -- it encourages the amateur webmaster to serve broken scripts and pages. Instead I've added checking for parameter validity and substitution of a default for an illegal value. The upper-left cube is now fed almost entirely bogus parameters, but still functions. Let me know if this is good enough -- I could still add some debuggin help or, eventually, the error masking.

    I've added a new parameter/mode. size_mode:'image' makes the height and width parameters apply to the image (the overall heigh/width are then derived); size_mode:'carousel' (or any other non 'image' value) makes the height/width apply to the container div. The carousel with DynamicDrive images is done with size_mode:'image' as is one of the vertical wheels on the right.
    Last edited by Harry Armadillo; 05-16-2005 at 06:56 PM.

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Too bad all that content is unavailable to clients with disabled JS...
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #15
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Sorry for the delay, been very busy. I'll run some tests with the updated script early next week, and post more feedback if needed.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.


  •  
    Page 1 of 8 123 ... LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •