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 2 of 8 FirstFirst 1234 ... LastLast
Results 16 to 30 of 117
  1. #16
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No worries. Free and fun don't impose deadlines.

  2. #17
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    I've gone ahead and posted the script on DD: http://www.dynamicdrive.com/dynamici.../carousel2.htm One thing I noticed is that in Opera 7, a vertical slideshow creates a huge gap at the bottom of the page; not sure about Opera 8 yet. Apart from that, looks great!
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  3. #18
    New to the CF scene
    Join Date
    May 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question New window target in carousel slideshow

    I tried out the Carousel Slide show here:

    http://blog.fullscalecommerce.com/

    Wondering how to make the links in the slide show open up in a new window.

    I actually have all the slideshow code here:

    http://blog.fullscalecommerce.com/portfolio.cfm and I "cfinclude" it into the main page. I tried a BASE target= in the head section but to no avail.

    Thank you

  4. #19
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    I've been using the original carousel for quite some time now. This is such a millennium improvement.

    One thing that I've always wanted was a way for you to be able
    to click the link and it would pop you out of a frame. I've tried
    adding the ' target="_top" ' parameter, but it just stays in the frame.

    Maybe in the next revision. Just wanted to say wicked improvement.

  5. #20
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, I wondered how long it would take before people wanted the links in new windows...

    How much control do you want (versus how much it takes to set up the show)? Do you want the links to all open in in separate new windows? To be opened in single pop-up, where clicking a another link replaces the pop-up page? Mix-and-match?

    Tell me your desires, then give me a couple days, and I'll (try to) make it happen.

  6. #21
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't mind. I'll take the one where clicking another link replaces the pop-up page, if you can make it happen. Hell, why not throw everything in?

    www.badh.net

  7. #22
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, new optional parameter lnk_base:"". lnk_base can be one of the standard link-targets '_self', '_parent', '_top' and '_blank', or it can be a frame/iframe path.name prepended with an underscore (so _pics for the in-page iframe named pics or _top.foo for a frame owned by the top frameset), or the name of a pop-up window. If no lnk_base is specified, a window named 'new' is used by default.

    new optional parameter lnk_targets:[]. If you don't want all the image links to have the same target, individual targets can be assigned. A target here overrides the lnk_base target (if present). If an image's entry in the lnk_targets array is blank or missing, lnk_base or the default is used.

    new optional parameter lnk_attr:[] Here you can specify the attributes to use for an image's pop-up window. If none are present, a regular sized window with all the toolbars, menus, etc. is used.

    In addition, the bug where opera sometime had huge gaps below or left of the document's body has been fixed.

    Sample page with updated carousel() function and a pair of examples to show how the new parameters in action:
    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(/[^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>
    </head><body>
    <div id='jake' style='width:180px;float:left;'>
    <h4>Linkage</h4>All of these images will open a google search in single (reused) window.
    <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'],
              lnk_base:'google',
              titles:['Happy',
                      'Angry',
                      'Sad',
                      'Big Grin',
                      'Look Here',
                      'Bright Idea',
                      'Caution',
                      'Question',
                      'Cool!'],
              image_border_width:1,
              image_border_color:'red'
              });
    </script></div>
    <div id='wendel' style="width:300px;float:right">
    <h4>More Linkage</h4>Two photos share a single window, closing/reopening it with each click to allow the attributes to change. One photo opens in a _blank window, with another window added each click. The last photo opens in an iframe.
    <script type='text/javascript'>
    carousel({id:'Photos Courtesy of Dynamic Drive',
              border:'',
              size_mode:'image',
              width:140,
              height:225,
              sides:6,
              steps:20,
              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'],
              lnk_base:'',
              lnk_targets:['photo',
                           'photo',
                           '_blank',
                           '_steve' ],
              lnk_attr:['width=200,height=300,top=200,menubar=yes',
                        'width=300,height=200,left=400,scrollbars=yes',
                        'width=150,height=250,left=300,top=100',
                        ''],
              titles:['Opens in \'photo\' window',
                      'Opens in \'photo\' window',
                      'Opens in blank window',
                      'Opens in iframe'],
              image_border_width:0,
              image_border_color:'blue'
              });
    </script></div>
    <iframe name='steve' style="margin-top:20px;width:300px;height:300px;border:0px solid white"></iframe>
    </body></html>
    Last edited by Harry Armadillo; 05-31-2005 at 07:52 AM.

  8. #23
    New to the CF scene
    Join Date
    May 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Harry Armadillo! You get the friggin Nobel Peace Prize for 2k5. I can't believe you did it... Thank you very much...

    I Salute you Sir!

  9. #24
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Hi:
    For the updated code, I noticed the slideshow no longer pauses when the mouse is over it- any reason why this was removed? Personally I think it's a useful feature.
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  10. #25
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That would be the fault of my spam-filters. When I post code, it gets sent out fine. But if I edit the post and am not paying attention, my spam-filters will chew up the code as it loads into the edit window and spit garbage back into the forums. Someday, when I'm not lazy, I'll reprogram that nonsense out.

    Fixed/replaced with good code!

  11. #26
    WA
    WA is offline
    Administrator
    Join Date
    Mar 2002
    Posts
    2,596
    Thanks
    2
    Thanked 19 Times in 18 Posts
    Wow thanks for the quick fix. You've inspired me to go ahead and update the script on DD for it just as fast as well: http://www.dynamicdrive.com/dynamici.../carousel2.htm
    - George
    - JavaScript Kit- JavaScript tutorials and 400+ scripts!
    - JavaScript Reference- JavaScript reference you can relate to.

  12. #27
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If only I was this responsive with real work.

  13. #28
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Need help please :-) simple for some, nightmare for me.

    Hi, could someone give me a hint on how to correct this so it shows in the middle and at full banner size.

    I just love effects, but cannot quiet get this one just where I like it.

    http://traffic-cells.com/P1/launcha2.htm

    as you can see its only showing like half the banner etc.

    All I want is for it to show the full banner under the top table there all the rest works fine :-)

    all help much appreciated and take it easy with code talk, I'm not that well in understanding the language.

    Thanks
    Rad2

  14. #29
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Where you have
    Code:
    <div align="center">
    <script type='text/javascript'>
    carousel({id:'carousel_3',
    change it to
    Code:
    <div style='text-align:center;'>
    <div style='text-align:left;width:468px;margin:auto;'>
    <script type='text/javascript'>
    carousel({id:'carousel_3',
    And down a little lower,
    Code:
      </script>
    </div>
    </body>
    should become
    Code:
      </script>
    </div></div>
    </body>

  15. #30
    New to the CF scene
    Join Date
    Jun 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ???

    okay i'm kinda new at this whole java script thing... but i've been trying to do the carousel slideshow and it comes up blank.. here is what i paste ....please let me know what and where is it wrong...thank you...

    <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]arams[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>
    <script type='text/javascript'>
    carousel({id:'carousel_0',
    border:'',
    size_mode:'image',
    width:75,
    height:75,
    sides:4,
    steps:8,
    speed:7,
    direction:'top',
    images:['http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_DSC00024.jpg',
    'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0009.jpg',
    'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0008.jpg',
    'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0007.jpg',
    'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0006.jpg',
    'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0005.jpg',
    'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0004.jpg',
    'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0003.jpg',
    'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0002.jpg',
    'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_Scan0001.jpg',
    'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_100_0055.jpg',
    'http://i5.photobucket.com/albums/y160/cpobleteporte/rnc/th_34SA3409.jpg'],
    links: [],
    titles:[],
    image_border_width:2,
    image_border_color:'black'
    });
    </script></div>



    i actually want it to go horizontal...if you can e-mail me or something for the exact script i would greatly appreciate it... c_porte79@yahoo.com...


 
Page 2 of 8 FirstFirst 1234 ... LastLast

LinkBacks (?)


Posting Permissions

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