Results 1 to 7 of 7

Thread: Sorted the carousel/lightbox prob, new problem now

  1. #1
    Join Date
    May 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Sorted the carousel/lightbox prob, new problem now

    1) Script Title: carousel2 and lightbox 2

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici.../carousel2.htm & http://www.dynamicdrive.com/dynamici...box2/index.htm
    3) Describe problem: Ok, got lightbox to work with carousel2 after some senior moments . I have a new problem now, if I click on a picture on the carousel it keeps starting the lightbox slideshow at picture 10.
    Test page here so you can look at the source code to see if or where I'm going wrong.One other thing, the pictures are being uploaded as I receive them, maybe thats got something to do with it.

    any help would be appreciated.

    Thanks.

    Paul
    Last edited by jscheuer1; 06-08-2011 at 05:01 AM. Reason: fix broken links to scripts

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,980
    Thanks
    43
    Thanked 3,196 Times in 3,158 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html lang="en-gb" xml:lang="en-gb">
    <head>
    <title>DRM CAMS OF THE WORLD</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="keywords" content="drm,sstv,amateur radio,drm webcams,drm cam,drm cams,2d0drm,webcams,easypal cam,Easypal cams">
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <link rel="icon" href="http://homepages.manx.net/2d0drm/favicon.ico" type="image/x-icon" /> 
    <link rel="shortcut icon" href="http://homepages.manx.net/2d0drm/favicon.ico" type="image/x-icon" />
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></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 if(/^lightbox/.test(targ)){
              params.links[i] = [params.links[i], document.createElement('a')];
              params.links[i][1].href = params.links[i][0];
              params.links[i][1].rel = targ;
              params.links[i][1].title = (params.titles && params.titles[i]? params.titles[i] : '');
              cdiv.appendChild(params.links[i][1]);
              }
    
            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.getElementsByTagName('a')[cdiv.getElementsByTagName('a').length - 1].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>
    <style type="text/css">
    #lbc2d0drm {
    	margin: 0 auto!important;
    }
    </style>
    </head>
    <body>
    <script type='text/javascript'>
    carousel({id:'lbc2d0drm',
              border:'0',
              size_mode:'image',
              width:100,
              height:100,
              sides:10,
              steps:23,
              speed:3,
              direction:'right',
              images:['http://homepages.manx.net/2d0drm/image1',
                      'http://homepages.manx.net/2d0drm/image2',
                      'http://homepages.manx.net/2d0drm/image3',
                      'http://homepages.manx.net/2d0drm/image4',
                      'http://homepages.manx.net/2d0drm/image5',
                      'http://homepages.manx.net/2d0drm/image6',
                      'http://homepages.manx.net/2d0drm/image7',
                      'http://homepages.manx.net/2d0drm/image8',
                      'http://homepages.manx.net/2d0drm/image9',
                      'http://homepages.manx.net/2d0drm/image10'],
              links: ['http://homepages.manx.net/2d0drm/image1',
                      'http://homepages.manx.net/2d0drm/image2',
                      'http://homepages.manx.net/2d0drm/image3',
                      'http://homepages.manx.net/2d0drm/image4',
                      'http://homepages.manx.net/2d0drm/image5',
                      'http://homepages.manx.net/2d0drm/image6',
                      'http://homepages.manx.net/2d0drm/image7',
                      'http://homepages.manx.net/2d0drm/image8',
                      'http://homepages.manx.net/2d0drm/image9',
                      'http://homepages.manx.net/2d0drm/image10'],					
    	lnk_base:'lightbox[2D0DRM]', //Link target for all links (see: http://www.codingforums.com/showthread.php?t=58814&page=2)
              titles:['Image #1',
    		'Image #2',
    		'Image #3',
    		'Image #4',
    		'Image #5',
    		'Image #6',
    		'Image #7',
    		'Image #8',
    		'Image #9',
    		'Image #10'],
              image_border_width:2,
              image_border_color:'cornflowerBlue'
              });
    </script>
    </body>
    </html>
    Notes: I'm still not happy with the Carousel script. I got it working for this, but I'm afraid it may no longer be usable for an ordinary Carousel. As for Lightbox, with no other content on the page and such large images, there are times in some browsers when the overlay appears to be too small.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    fraggit (06-08-2011)

  4. #3
    Join Date
    May 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up A happy man

    Well John, you are a star.....it works superb.
    I can't thank you enough.
    The link I gave you was just a test page, I've implemented it on the main page I wanted it for, which is here.
    Only half done at the moment, but as you see, it works.
    Can I ask what you actually did to the script, maybe highlight it for me.
    I like to try and learn from my mistakes, as you can tell I'm a complete novice at this sort of thing.
    I'm guessing it was within the carousel script itself.
    Thanks again John.

    Paul

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,980
    Thanks
    43
    Thanked 3,196 Times in 3,158 Posts
    Blog Entries
    12

    Default

    Where to begin? First off this isn't the Lightbox script from Dynamic Drive (v2.03a). It's version 2.05. Starting with v2.04 Lightbox began to trigger off of clicks to the page rather than clicks to the links. This allows us to construct rel="lightbox" links and append them to the page after Lightbox initializes without having to attempt to trigger Lightbox for these links.

    I don't have your original code but that was what that function that was inside here:

    Code:
     else if(/^lightbox/.test(targ)){
              params.links[i] = [params.links[i], document.createElement('a')];
              params.links[i][1].href = params.links[i][0];
              params.links[i][1].rel = targ;
              params.links[i][1].title = (params.titles && params.titles[i]? params.titles[i] : '');
              cdiv.appendChild(params.links[i][1]);
              }
    was trying to do. It didn't. Lightbox was launching off of the invalid links (they were all unclosed) that were hard coded to the page. I removed those. They were why it always started at 10. That was the last link before the slideshow, so any click on the show triggered it.

    Other than that I simply kept the code (in the above code block) that constructed Lightbox links and appended them to the page. I removed the display none from that code because later I appended the Carousel images to the created links:

    Code:
    cdiv.getElementsByTagName('a')[cdiv.getElementsByTagName('a').length - 1].appendChild(images[i]);
    and we want to see those images and be able to click on the links. That line replaced:

    Code:
    cdiv.appendChild(images[i]);
    The rest of the changes were just to tidy up the code, construct a standards compliant page, and to center the Carousel.

    BTW, the images array and the links array can be different. The images are what's shown in the Carousel, and the links are what's shown in the Lightbox. You're using the same images for both. That's why the arrays are coded identically.

    Unless you have specific questions, that's about it by way of explanation of what I did. I've since tightened up the Carousel code though:

    Code:
    <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){
      carousel.lightbox = false;
      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 if(/^lightbox/.test(targ)){
              carousel.lightbox = true;
              params.links[i] = [params.links[i], document.createElement('a')];
              params.links[i][1].href = params.links[i][0];
              params.links[i][1].rel = targ;
              params.links[i][1].title = (params.titles && params.titles[i]? params.titles[i] : '');
              cdiv.appendChild(params.links[i][1]);
              }
    
            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];
          if(carousel.lightbox)
            params.links[i][1].appendChild(images[i]);
          else
            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>
    to make it a bit more efficient and to allow for it to also be used for non-Lightbox Carousels on the same page
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #5
    Join Date
    May 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Sorted

    Wow....I think what your saying from your explanation is, I had a cat in hells chance of sorting that myself . Well it'll take me a couple of days to digest that. I did originally follow this forum link maybe you remember it? that of course, wouldn't of worked as you explained with this code
    Code:
    else if(/^lightbox/.test(targ)){
              params.links[i] = [params.links[i], document.createElement('a')];
              params.links[i][1].href = params.links[i][0];
              params.links[i][1].rel = targ;
              params.links[i][1].title = (params.titles && params.titles[i]? params.titles[i] : '');
              cdiv.appendChild(params.links[i][1]);
              }
    This was the code in the forum link I was following, which is the same, I think, with a few more lines
    Code:
    else if(/^lightbox/.test(targ)){
              params.links[i] = [params.links[i], document.createElement('a')];
              params.links[i][1].href = params.links[i][0];
              params.links[i][1].style.display = 'none';
              params.links[i][1].rel = targ;
              params.links[i][1].title = (params.titles && params.titles[i]? params.titles[i] : '');
              cdiv.appendChild(params.links[i][1]);
              (function(i, l){
                i.onclick = function(){myLightbox.start(l)};
                })(images[i], params.links[i][1]);
              }

    Anyway, I'm waffling now
    Thank you so much John, we're lucky to have people like you to sort these problems out.

    All the best

    Paul
    Last edited by fraggit; 06-08-2011 at 08:35 AM.

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,980
    Thanks
    43
    Thanked 3,196 Times in 3,158 Posts
    Blog Entries
    12

    Default

    There was another change in Lightbox v2.05, or perhaps even 2.04 - myLightbox was no longer defined, and the start function became a private method such that, without modification to the lightbox.js script, one can no longer launch a Lightbox except by clicking on a rel="lightbox" link or area tag.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #7
    Join Date
    Feb 2009
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Thickbox support

    I am trying to change this code so that it will support thickbox instead of light box however thickbox uses class="thickbox" to intiate... can you assist?
    Thanks for the help!

Bookmarks

Posting Permissions

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