Log in

View Full Version : Carousel slideshow wont work


miller9951
08-19-2010, 02:59 AM
I am trying to add the Carousel slideshow to my wesite but after making the adjustments I preview in browser all I get is a box with a red x. Does anyone know what might be causing this? Below is a copy of my code.

Thanks

<div id="Carouselplace" style="position:relative; width: 549px; height: 98px; left: 208px;">
<script type="text/javascript">

/***********************************************
* Carousel Slideshow script- © Ger Versluis 2003
* Permission granted to DynamicDrive.com to feature script
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/********************************************************
Create a div with transparent place holder in your html
<div id="Carousel" style="position:relative">
<img src="placeholder.gif" width="404" height="202">
</div>
placeholder width:
4 sided: 1.42 * carousel image width + 3
6 sided: 2 * carousel image width +4
8 sided: 2.62 * carousel image width + 5
12 sided: 3.87 * carousel image width + 7
placeholder height:
carousel image height+2

Insert onload in body tag
<body onload="Carousel()">
*********************************************************/

// 7 variables to control behavior
var Car_Image_Width=140;
var Car_Image_Height=96;
var Car_Border=true; // true or false
var Car_Border_Color="white";
var Car_Speed=4;
var Car_Direction=true; // true or false
var Car_NoOfSides=12; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"fair10_1.jpg","",
"fair10_2.jpg","",
"fair10_3.jpg","", //this slide isn't linked
"fair10_4.jpg","",
"fair10_5.jpg","",
"fair10_6.jpg","",
"fair10_7.jpg","",
"fair10_8.jpg","",
"fair10_9.jpg","",
"fair10_10.jpg","",
"fair10_11.jpg","",
"fair10_12.jpg","" // NOTE No comma after last line
);


/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

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].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
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].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].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}

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}
</script>

<div id="Carousel" style="position:relative">
<img src="placeholder.gif" width="549" height="98">
</div>
<p><font face="Arial" size="-2">Free DHTML scripts provided by<br><a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

</div>
jscheuer1
08-19-2010, 06:12 AM
That generally indicates that one or more (perhaps all) of the images aren't where your code says they are.

If you want more help, please put up a live demo of the problem and post a link to it.
miller9951
08-20-2010, 02:07 AM
Here is the link to our contruction pagehttp://www.martincountyfair.com/index1.html
jscheuer1
08-20-2010, 04:55 AM
No red X's here. The only problem appears to be an onload conflict. Get rid of this:


<body onload="Carousel()">

You can only have one body tag anyway and there already is another one. At the end of the script, add the highlighted as shown:


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

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}

if (window.addEventListener){
window.addEventListener('load', Carousel, false);
}
else if (window.attachEvent){
window.attachEvent('onload', Carousel);
}
</script>
miller9951
08-20-2010, 12:09 PM
Hi John,

Thank you very much for the help in resolving this issue. I made the changes and now the carousel works but I have a shadow box around it and it has a red x in that box. I also noticed that when I changed the script now the side scroller starts out fine then it just says undefined. Is one scroller working against the other and can they be fixed so both will work. Thanks again for all your help!!!!

Eddie
jscheuer1
08-20-2010, 02:58 PM
There is a variable conflict with i between the two scripts. This can most easily be fixed by changing (add the highlighted) in two places in the Carousel script:


function Carousel(){
if(document.getElementById){
for(var i=0;i<Car_Image_Sources.length;i+=2){

and here:


function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(var i=0;i<C_HalfNo;i++){

I'm not sure what you are referring to as:


I have a shadow box around it and it has a red x in that box

There is still no red X on your demo (index1) page. However, as I said before, that generally indicates that the image is missing (not where the code says that it is). Upper and lower case letters in paths and filenames are almost always important on the web, almost never locally.

There is a missing image though, here:


<div id="Carousel" style="position:relative; visibility: visible;">
<img src="www.martincounty fair.com/photos/placeholder.gif" width="549" height="98">
</div>

That should be:


<div id="Carousel" style="position:relative; visibility: visible;">
<img src="photos/placeholder.gif" width="549" height="98">
</div>

Additionally, and this may or may not be important for this, but is worth noting - On your index1 page you have:


<link href="file:///C|/Users/Eddie/Documents/My Web Sites/MCFair.css" rel="stylesheet" type="text/css" />

If viewed from your computer, that might get used. On the web I substituted:

mcfair.css

which may or may not be equivalent.
miller9951
08-20-2010, 07:27 PM
Hey John,


THANK YOU so very much for your help that worked out great. Is there an easy way of adjusting the speed of the rotation?

Thanks again,
Eddie
jscheuer1
08-21-2010, 02:41 AM
Easy, yes - but also a little tricky insofar as, if it's too slow or too fast, it just won't look all that good. And more importantly because you cannot count on absolute uniformity of the speed across various browsers and platforms (more on that later).

That said, here's where to edit:


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

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}

if (window.addEventListener){
window.addEventListener('load', Carousel, false);
}
else if (window.attachEvent){
window.attachEvent('onload', Carousel);
}
</script>

The higher that number, the slower it will rotate. Decreasing it will speed things up. The number represents milliseconds (1000 milliseconds = 1 second). In this case 50 milliseconds between each update of the position.

You can probably slow it down to 100, or speed it up to 30, anything in that range, or slightly outside it in either direction. Much more than that and I just don't think the result will look good. It's a judgment call, but I think most folks would agree.

Additionally, the effect will vary by the browser and the computer it's viewed on. That's to say, if you catch my drift, that you don't want any value that appears 'just acceptable' on your system because it's bound to be wrong for some others.

That's to say, if you are going for slower, find the slowest that looks good to you, and then speed it up a little to compensate for system differences. Or, if you are going for faster, find the fastest that looks good to you, and slow it down a little.