How can I use this 2 scripts together: Lightbox 2.03a and CarouselSlideshowII

[theEdge]

1) Script Title: LightboxImageViewer2.03a/CarouselSlideshowII

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

3) Describe problem:

If I use the CarouselSlideshowII the hyperlinks will be opened by
---
'function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}'
---
and if I use the LightboxImageViewer the links are opened by
---
<a href='xyz.jpg' rel='lightbox' title='mytitle'>link</a>
---

How can I realize the Lightbox linkstyle using a OnClick function where I can pass the rel and title values ?

Pleaze help a newb

cu,theEdge.

[jscheuer1]

The CarouselSlideshowII that you link to in your post doesn't have the code:

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}

that you claim that it does. That script is called:

Carousel Slideshow

It would be good to know which script you are actually using before trying to get it to open a lightbox. However, with either Carousel script, I can tell you that since the images and their links (if any) are dynamically generated as needed for the visible rotating image panels, it would be easier to use the single lightbox, rather than the group lightbox method of the Lightbox image viewer 2.03a script you say that you want to use. So, it would also be good to know which of these methods you plan to employ.

[theEdge]

Sorry,I post the wrong versions link, I use CarouselSlideshow
http://www.dynamicdrive.com/dynamicindex14/carousel.htm

And I will use the single lightbox version for this time...

cu,theEdge.

[jscheuer1]

OK, that does make it quite a bit easier. Simply install both scripts on the page as per each of their instructions on their respective demo pages, skipping the markup part of lightbox, we will have Carousel take care of that part. That means, for lightbox all you do is Step 1, and make sure those files are available to the page. Then edit the Carousel script right where you imagined -

Change:

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}

to:

var lightlink=document.createElement('a');
lightlink.setAttribute('rel', 'lightbox', 0);
function C_LdLnk(){if(this.lnk){lightlink.href=this.lnk;myLightbox.start(lightlink);}};

Now, I hope you realize that lightbox will only open images, so the links you specify in the Carousel script here:

	Car_Image_Sources=new Array(
		"photo1.jpg","http://www.dynamicdrive.com",
		"photo2.jpg","http://www.javascriptkit.com",
		"photo3.jpg","", //this slide isn't linked
		"photo4.jpg","http://www.codingforums.com" // NOTE No comma after last line
		);

must be to other, most likely larger, images, not to pages as is done in the demo for Carousel.

[theEdge]

Big Thx for your help, works fine !!!

And is there a possibility to set the link title dynamically for each image ?

var lightlink=document.createElement('a');
lightlink.setAttribute('rel', 'lightbox', 0);
lightlink.setAttribute('title', 'MyTitle',0); // Only a fixed title for all links, how to set this attribute dynamically for each different link ?
function C_LdLnk(){if(this.lnk){lightlink.href=this.lnk;myLightbox.start(lightlink);}};

Couldn`t I add the link title to the 'Car_Image_Sources' array

Car_Image_Sources=new Array(
		"./photo1_smal.jpg","./photo1.jpg","linktitle 1",
		"./photo2_smal.jpg","./photo2.jpg", "linktitle 2" NOTE No comma after last line
		);

and pass the linktitle value to a changed C_LdLnk function ???

something like

function C_LdLnk(LinkText)
var lightlink=document.createElement('a');
lightlink.setAttribute('rel', 'lightbox', 0);
lightlink.setAttribute('title', LinkText,0);
{if(this.lnk){lightlink.href=this.lnk;myLightbox.start(lightlink);}};

Please show me the right way
cu,theEdge.

[theEdge]

Hi, please don't blame me for being in such a hurry, but could anyone tell me how to handle this task ???

It would be great if I get a solution before this day is gone because I haven't internet access at this weekend ....

cu,theEdge.

[jscheuer1]

This is a little more complicated. It would probably be easier to use a separate array for the titles with every other entry blank, less math would need to be changed in the script:

	Car_Image_Sources=new Array(
		"thumb/photo1.jpg","large/photo1.jpg",
		"thumb/photo2.jpg","large/photo2.jpg",
		"thumb/photo3.jpg","large/photo3.jpg",
		"thumb/photo4.jpg","large/photo4.jpg" // NOTE No comma after last line
		);

	Car_Image_Titles=new Array(
		"Title One","",
		"Title Two","",
		"Title Three","",
		"Title Four","" // NOTE No comma after last line
		);

The script would need to be edited in a few places (add the red parts):

	function Carousel(){
		if(document.getElementById){
			for(i=0;i<Car_Image_Sources.length;i+=2){
				C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
			C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
			Car_Div=document.getElementById("Carousel");
			for(i=0;i<C_HalfNo;i++){
				CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);	
				CW_I[i].style.position="absolute";
				CW_I[i].style.top=0+"px";
				CW_I[i].style.height=Car_Image_Height+"px";
				if(Car_Border){
					CW_I[i].style.borderStyle="solid";
					CW_I[i].style.borderWidth=1+"px";
					CW_I[i].style.borderColor=Car_Border_Color}
				CW_I[i].src=Car_Image_Sources[2*i];
				CW_I[i].lnk=Car_Image_Sources[2*i+1];
				CW_I[i].ttl=Car_Image_Titles[2*i];
				CW_I[i].onclick=C_LdLnk;
				CW_I[i].onmouseover=C_Stp;
				CW_I[i].onmouseout=C_Rstrt}
			CarImages()}}

				if(Car_Direction){
					CW_I[C_HalfNo]=CW_I[0];
					for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
					CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
					CW_I[C_HalfNo-1].ttl=Car_Image_Titles[C_CrImg];
					CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
				else{	for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
					CW_I[0]=CW_I[C_HalfNo];
					CW_I[0].src=Car_Image_Sources[C_CrImg];
					CW_I[0].ttl=Car_Image_Titles[C_CrImg];
					CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}

var lightlink=document.createElement('a');
lightlink.setAttribute('rel', 'lightbox', 0);
function C_LdLnk(){if(this.lnk){lightlink.title=this.ttl;lightlink.href=this.lnk;myLightbox.start(lightlink);}};

[theEdge]

Thk you so much, you made my day

cu,theEdge.