PDA

View Full Version : Why Images Not Showing in Carousel Slideshow



Privileged
10-03-2009, 12:46 AM
1) Script Title: Carousel Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/carousel.htm

3) Describe problem: Hi I am having problems with the carousel slideshow. My images are not showing. Can anyone help?

Here is the code I used:


<body onload="Carousel()">



<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="http://www.pictures-of-jamaica.com/image-files/placeholder.gif" width="595" height="171">
</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=225;
var Car_Image_Height=169;
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=8; // 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(
"http://www.pictures-of-jamaica.com/image-files/Claremont3slide.JPG","",
"http://www.pictures-of-jamaica.com/image-files/FlowersSlide3.JPG","",
"http://www.pictures-of-jamaica.com/image-files/Cobwebslide3.JPG","",
"http://www.pictures-of-jamaica.com/image-files/pots1slide3.JPG", "",
"http://www.pictures-of-jamaica.com/image-files/Claremont1slide3.JPG","",
"http://www.pictures-of-jamaica.com/image-files/ChurchSlide3.JPG","",
"http://www.pictures-of-jamaica.com/image-files/windmill3.JPG","",
"http://www.pictures-of-jamaica.com/image-files/ChairsSlide3.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="http://www.pictures-of-jamaica.com/image-files/placeholder.gif"
height="171" width="595"></div>
<p><font face="Arial" size="-2">Free DHTML
scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
<br>


Here is the test page: http://www.pictures-of-jamaica.com/tropical-mix2.html

Help!!

jscheuer1
10-03-2009, 03:20 AM
There could be other problems, but the images appear to not be on the server. This could mean that you simply did not upload them. But it could mean that you uploaded them somewhere else than shown in your source code for their locations. Or it could mean that they are exactly where you think they are, but that their paths and/or filenames as listed in your source code are a mismatch for the exact upper and lower case of their actual names. You see, upper and lower case in paths and filenames matter on most servers, but not on most local computers. It is also possible that more than one of these factors is involved, or even some others. The above mentioned are the most likely reasons for images not being found by the page.

Other than that (the images appearing to not be there for whatever reason(s)), the carousel appears to be working.