Results 1 to 8 of 8

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

  1. #1
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    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.
    - John
    ________________________

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

  3. #3
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    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:

    Code:
    	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.
    - John
    ________________________

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

  5. #5
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Big Thx for your help, works fine !!!

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

    Code:
    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

    Code:
    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

    Code:
    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.
    Last edited by theEdge; 02-01-2008 at 07:26 AM.

  6. #6
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    	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):

    Code:
    	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()}}
    Code:
    				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]}
    Code:
    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);}};
    - John
    ________________________

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

  8. #8
    Join Date
    Jan 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thk you so much, you made my day

    cu,theEdge.

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
  •