carousel script with light box

**npimpfellow** · 02-04-2009, 10:44 PM

I'm interested in combining the carousel script with light box in a similar way as mentioned in:

http://www.dynamicdrive.com/forums/s...ad.php?t=36425

unfourtionately I can't figure it out!

http://www.dynamicdrive.com/dynamicindex14/carousel.htm
and
http://www.dynamicdrive.com/dynamici...box2/index.htm

is this possible? I'm new to learning java and still in the noob stage. Please help if possible!

**jscheuer1** · 02-05-2009, 06:42 AM

For a simple installation, install the Lightbox 2.03a scripts and styles in the head of the page as instructed on the Lightbox 2.03a demo page. And install the Carousel script according to it's instructions on its demo page.

Then of course, for the Carousel array, use your image/larger image pairs, ex:

Code:

	Car_Image_Sources=new Array(
		"photo1.jpg","photo1_lrg.jpg",
		"photo2.jpg","photo2_lrg.jpg",
		"photo3.jpg","photo3_lrg.jpg",
		"photo4.jpg","photo4_lrg.jpg" // NOTE No comma after last line
		);

Replace this code in the Carousel script (at the end):

Code:

	function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
	function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
	function C_Rstrt(){C_Stppd=false}

with this code:

Code:

	function C_LdLnk(){if(this.lnk && !Carousel.lnks[this.lnk]){
		Carousel.lnks[this.lnk] = document.createElement('a');
		Carousel.lnks[this.lnk].href = this.lnk;
		Carousel.lnks[this.lnk].rel = 'lightbox';
		} if(this.lnk) myLightbox.start(Carousel.lnks[this.lnk]);}
	function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
	function C_Rstrt(){C_Stppd=false}
	Carousel.lnks = {};

**npimpfellow** · 02-05-2009, 10:34 AM

thanks for your quick reply. I checked the code and I think that I'm using a newer version of carousel found here:

http://www.dynamicdrive.com/dynamici.../carousel2.htm

I tried to apply the same code techniques that you recommended but I couldn't get it to work. I'm using the vertical version of the code.

**jscheuer1** · 02-05-2009, 04:20 PM

I saw your other post referring to Carousel II later. In the future, make up your mind as to which script you are using, start one new thread about it (don't add on to old threads).

Anyways, install the two scripts as shown on the demo pages for each (Lightbox 2.03a and Carousel II).

In Carousel II Step 2, for the images, use the smaller images, and for the links, use the the larger image, ex:

Code:

          images:['photo1.jpg',
                  'photo2.jpg',
                  'photo3.jpg',
		  'photo4.jpg'],
          links: ['photo1_lrg.jpg', //enter link URLs, or for no links, empty array instead (links :[])
		  'photo2_lrg.jpg',
		  'photo3_lrg.jpg',
		  'photo4_lrg.jpg'],

Also in Carousel II Step 2 set the lnk_base:'lightbox' or lnk_base:'lightbox[groupname]' or use the individual lnk_targets array entries for this, ex:

Code:

lnk_base:'lightbox[carousel]',

You may also setup titles as usual already for the Carousel II Step 2 script. If so, they will become the lightbox captions.

In the main Carousel II script (Step 1 for that script's demo page) add (highlighted):

Code:

    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].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]);
          }
        else{
          attr=(params.lnk_attr && para . . .

**npimpfellow** · 02-05-2009, 06:41 PM

AWESOME! Script works beautifully now! Thank you so much!

One last question for you, what resources would you recommend to someone interested in teaching them self how to write javascript? I'm really good at reading and cutting up code but I'd like to improve my skills.
and thank you so much for all your help!

**npimpfellow** · 02-05-2009, 08:05 PM

uh oh, I spoke too soon. Script works GREAT in Firefox (which is the only browser anyone should be using anyway!) but when running ie explorer I get a pop-up error that says the page can not load!

Here is the script as I have it now:

I'm looking around online for a good way to debug

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){
  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].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]);
          }

        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>




<script type='text/javascript'>
carousel({id:'carousel_3',
          border:'0',
          size_mode:'image',
          width:133,
          height:133,
          sides:20,
          steps:8,
          speed:3,
          direction:'top',
          images:['http://a848.ac-images.myspacecdn.com/images01/79/l_769955353c52b04f4167f5fe955a8ac7.jpg',
                  'http://a498.ac-images.myspacecdn.com/images01/50/l_0c5ecacb63974a70cfe57d8f95b3d4c9.jpg',
                  'http://b6.ac-images.myspacecdn.com/00669/64/07/669917046_l.jpg',
									'http://a518.ac-images.myspacecdn.com/images01/37/l_b72c9513066ff9edc971ae3b7ff87a75.jpg','http://a50.ac-images.myspacecdn.com/images01/34/l_c35f197bd50d25010a12b1e379238241.jpg','http://a151.ac-images.myspacecdn.com/images01/42/l_2908d7de776f62a368686348e82b20b6.jpg','http://a99.ac-images.myspacecdn.com/images01/40/l_f380672c0dc3880ec49ccc2c0283348a.jpg','http://a371.ac-images.myspacecdn.com/images01/12/l_76213fa9acb7b25f7894839b68702d5a.jpg','http://a816.ac-images.myspacecdn.com/images01/126/l_ced3e8498186b675cbb1e7763ff3999f.jpg','http://a549.ac-images.myspacecdn.com/images01/16/l_880dc9fa344ca3755ca3256fd24a7ec4.jpg'],
          links: ['http://a848.ac-images.myspacecdn.com/images01/79/l_769955353c52b04f4167f5fe955a8ac7.jpg',
                  'http://a498.ac-images.myspacecdn.com/images01/50/l_0c5ecacb63974a70cfe57d8f95b3d4c9.jpg',
                  'http://b6.ac-images.myspacecdn.com/00669/64/07/669917046_l.jpg',
									'http://a518.ac-images.myspacecdn.com/images01/37/l_b72c9513066ff9edc971ae3b7ff87a75.jpg','http://a50.ac-images.myspacecdn.com/images01/34/l_c35f197bd50d25010a12b1e379238241.jpg','http://a151.ac-images.myspacecdn.com/images01/42/l_2908d7de776f62a368686348e82b20b6.jpg','http://a99.ac-images.myspacecdn.com/images01/40/l_f380672c0dc3880ec49ccc2c0283348a.jpg','http://a371.ac-images.myspacecdn.com/images01/12/l_76213fa9acb7b25f7894839b68702d5a.jpg','http://a816.ac-images.myspacecdn.com/images01/126/l_ced3e8498186b675cbb1e7763ff3999f.jpg','http://a549.ac-images.myspacecdn.com/images01/16/l_880dc9fa344ca3755ca3256fd24a7ec4.jpg'],
          lnk_base:'',
          lnk_targets:['lightbox[carousel]', //Sets Target To Lightbox (can be blank new ect.)
                       'lightbox[carousel]',
                       'lightbox[carousel]',
                       'lightbox[carousel]','lightbox[carousel]','lightbox[carousel]','lightbox[carousel]','lightbox[carousel]','lightbox[carousel]','lightbox[carousel]', ],
          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:['Skully Me',
                  'Contrast',
                  'Crazy Ninja',
                  'If I was Lil John','Say Hello To My Little Friend','Virus','Stuck Between A Rock','I Can Airbrush','Chillin at the Greenbelt','Gangsta Fro'],
          image_border_width:0,
          image_border_color:'black'
          });
</script>

**jscheuer1** · 02-06-2009, 04:28 AM

That sounds like a syntax error in your HTML code, or something in the HTML that IE doesn't like. I tested my demo in IE 6 and 7 as well as FF 3.0.5 and Opera 9.x

Post a link to your page if you want more help.

**npimpfellow** · 02-06-2009, 04:50 AM

my website is

www.nathangoodfellow.us

when I took the script off the page things work with ie but when I put the script up I get the error message. I will put it back on the site so you can check the error message

I use wordpress for site management

lightbox script is built into wordpress plugin

**jscheuer1** · 02-06-2009, 05:49 AM

Well, it's what I said, but not anything you did, rather how I chose to append the script generated link elements to the page for use by Lightbox. It shouldn't really matter, but since I was working without a container, IE was fine in my demos. However, in your layout (as with most pages) the Carousel is being written to a container, while this is happening, apparently the body element isn't available in IE, which makes an odd sort of sense. We can get around this with a simple change (highlighted) to the code that I had added to the main Carousel script:

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]);
          }

P.S. I will go back and edit my previous post and to yours that have this code in it to correct it there as well so that others don't copy the problem from there if they come upon this thread later and want to use it.

**npimpfellow** · 02-06-2009, 07:09 AM

Works like a charm! Thank you so much!

I think the listed script should be updated with lightbox compatibility, these two definitely work well together!

Thread: carousel script with light box

Thread Tools

Search Thread

carousel script with light box

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

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

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

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

Bookmarks

Bookmarks

Posting Permissions