PDA

View Full Version : Carousel I Problems



dp08
05-13-2006, 03:33 AM
Hello everybody,

I have been playing around with the carousel slideshow I (http://www.dynamicdrive.com/dynamicindex14/carousel.htm) for about a week now, to no avail. I have the actual cube on the page, but it will not display pictures, just the normal box with the x in it when a picture will not work.

Here is the code for the carousel which I am trying to use in the webpage:

This is my body code
<body onmousemove="closesubnav(event);" onload="Carousel()">
<!--3D Cube Beginning-->
<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=281;
var Car_Image_Height=179;
var Car_Border=true; // true or false
var Car_Border_Color="white";
var Car_Speed=6;
var Car_Direction=true; // true or false
var Car_NoOfSides=4; // 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(
"Pictures\Alaska\Anchorage.jpg","",
"Pictures\Alaska\Glacier.jpg","",
"Pictures\Alaska\Iditarod.jpg","", //this slide isn't linked
"Pictures\Alaska\Juneau.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:absolute; left: 492px; top: 150px;"><img src="Flags/placeholder.gif" width="281" height="181" /></div>
<!--3D Cube End-->

Any help would be greatly appreciated :)

P.S. I had to change the style="position:relative; part to style="position:absolute; ....or else it ran infinitessimally off of my page...

jscheuer1
05-13-2006, 07:05 AM
Perhaps these are not the exact locations of your images:

Car_Image_Sources=new Array(
"Pictures\Alaska\Anchorage.jpg","",
"Pictures\Alaska\Glacier.jpg","",
"Pictures\Alaska\Iditarod.jpg","", //this slide isn't linked
"Pictures\Alaska\Juneau.jpg","" // NOTE No comma after last line
);

That includes any directory (folder) names and filenames that are of a different case (upper and lower case matter on the web) and for many browsers even on local systems. Another crucial component of the location involves using the correct slash character, which for all html and javascript is the upslash (/). I see you are using the downslash (\). This will never work in javascript as it is the escape character and therefore disappears in this context.

Finally, a possible problem for some browsers are your html comments. Unless specifically required to be otherwise for certain types of comments that interact with certain browsers and/or editors, these should always contain a space after the first two dashes and a space before the last two dashes. In other words like so:


<!-- 3D Cube Beginning -->

not like this:


<!--3D Cube Beginning-->

This only matters on rare occasion and I doubt it is in play here but, never hurts to do it right.

dp08
05-14-2006, 02:01 AM
John,

Your one idea was correct. The slash was the wrong way. I guess I assumed it would be the same as a regular img tag's call for a picture would've been. Thank you very much, I greatly appreciate your help, and especially how quickly you answered :)

David

jscheuer1
05-14-2006, 02:39 AM
The upslash (/) is also required for paths (even in ordinary HTML) once our page is live. Most browsers (IE is the exception) will not let you use it for paths in your ordinary HTML code, locally either. No browser will allow it in javascript, as it is the escape character.

scout
04-09-2007, 02:17 PM
I'm also having problems with the carousel slideshow. My images showup and scroll across the page but the placeholder is larger and the images don't scroll to the edge of it. Also the square with the red x is visible. My site is http://www.peachesncreamperfumery.net if anyone would be so kind to check it out and tell what i am doing wrong. I'd really appreciate the help.

scout
04-09-2007, 02:28 PM
I have fixed the problem. I needed to specify my website for the placer image eg http;//www.peachesncreamperfumery.net/images/placeholder.gif

hope this may help anyone else with the same problem!