Using Carousel script with Thumbnails viewer

[vanbao]

Hi,

I would like to combine these two scripts so instead of having the thumbnails be static like it is now, they would be rotating like the images in the carousel script. Is this possible.

for example, I already have the carousel script working on the following page:

http://www.olanibeautyspa.com/aboutus.shtml

What I would like to be able to do is when the mouse is placed over each thumbnail, the large image of the left would be replaced with a large image of the corresesponding thumbnail.

Thank you so much for your help.

vanbao

[jscheuer1]

It would be fairly easy, if you are willing to give up the links for the images in the carousel slideshow, to high jack that variable for the image name to be shown onmouseover and simply have it replace the source of the large image. Are you?

[jscheuer1]

I played around with this some more and keeping the optional links is fairly easy too, so let's go with that. OK, add a new array (shown in red) to the carousel script (it will contain the large images in the same order as the carousel images, if you want to skip one, leave the empty quotes and the comma at the end of the line behind):

	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
		);
		
	Car_Large_Sources=new Array(
		"",  //no large image for photo1.jpg in the above array
		"photo6.jpg",
		"photo7.jpg",
		"photo8.jpg" // NOTE No comma after last line
		);

/***************** DO NOT EDIT BELOW **********************************/

Next, find these lines in the script, and add the red one as shown:

				CW_I[i].src=Car_Image_Sources[2*i];
				CW_I[i].lnk=Car_Image_Sources[2*i+1];
				CW_I[i].pic=Car_Large_Sources[i];

Find this line:

	function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}

Make it like this:

	function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;if(this.pic){document.getElementById('picArea').src=this.pic}}

Finally, in your HTML where you have:

<td width="100%"><img id="picArea" src="images/aboutus.jpg" width="295" height="590"></td>

add in the id as shown in red.

Note: Unless all of your large images are the same dimensions, remove dimensions from the above image tag and set the dimensions of the td to the largest width and the largest height in the large image collection and add these two attributes:

<td valign="middle" align="center">

Depending upon the rest of your layout and the image sizes, that may or may not look good. Best to have all the large images be of the same dimensions and not worry about this last part.

[vanbao]

John.

Thank you so much for your help. I will check it out and see. Are these lines we are editing are the codes for the carousel script of the other script.

[jscheuer1]

Perhaps I should have been more clear about that. It's all in the carousel script. The image thumbnail viewer code is not required, get it off of your page, it may cause problems.

Notes: The carousel script is so robust that only concepts from the thumbnail viewer were required as incorporations to it. The only thing that may need to be 'beefed up' is the display area for the larger images, something that was overly complex and not well executed in the thumbnail script anyway (my opinion). This will only be a problem and only perhaps one, if the larger images are of varying dimensions, as mentioned at the end of my previous post in this thread.

[vanbao]

Hi John,

You are incredible. It works like a charm and it is just what I want it. It is awesome and I love it. Thank you so much.

Vanbao

[jscheuer1]

Well then, you can make the array look like this:

 If Large Image is not needed keep it ""
*/
	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
		);

You still need to find this line:

	function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}

But, change it to this:

	function C_Stp(){if(this.lnk){document.getElementById('picArea').src=this.lnk};C_Stppd=true;}

Find and remove this line:

				CW_I[i].onclick=C_LdLnk;

The HTML change (highlight red):

<td width="100%"><img id="picArea" src="images/aboutus.jpg" width="295" height="590"></td>

Remains the same as before. That's it, as long as the large images are all of the same dimensions.

[vanbao]

Hi John,

I just realized that there is one small problem. Some how, the images which appears on the left side will not show more then 4 images. In other word, if I place the mouse on the 5, 6,7 images on the carousel, the corresponding images that will appear on the left will be 1,2 3.

Here is what I am talking about.
http://www.olanibeautyspa.com/aboutus.shtml

Thank you so much for your help John.

Vanbao

[jscheuer1]

Ya, I see that, there needs to be two more lines added to the code. I missed this before because, in my test there were the same number of images as sides. Since you have more images than sides, this 'throws it off', pointing up my error in not including these two additional lines:

Find this section in the code (near the end of the script) and make the additions shown in red:

					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].pic=Car_Large_Sources[C_CrImg/2];
					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].pic=Car_Large_Sources[C_CrImg/2];
					CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
				C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
		setTimeout("CarImages()",50)}

[vanbao]

John.

It works perfectly. THANK YOU SO MUCH. Can I send you a gift for your help. Please email me your address. My email is baovan@yahoo.com

I am not quite sure what you are referring to in the above reply #7.

vanbao