Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Can't add pictures

Status
Not open for further replies.
cannuck3

cannuck3

Technical User
Dec 14, 2006
5
I am total new to Jave and have aquired this script The Carosel works but I can get pictures into it.
Here is the script that is not woking for me.
Can any one help ?
I have tried to put in Storm1 and bluejay but that is not doing it.
Thanks Cannuck3
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Free DHTML scripts provided by Dynamic Drive</title>
</head>

<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 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=225;
var Car_Image_Height=200;
var Car_Border=true; // true or false
var Car_Border_Color="blue";
var Car_Speed=4;
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(
"storm1.jpg","C:\Documents and Settings\Cannuck3\My Documents\My Webs\myweb4\images",
"bluejays.jpg","C:\Documents and Settings\Cannuck3\My Documents\My Webs\myweb4\images")


/***************** 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=new Image();C_Pre_Img.src=Car_Image_Sources}
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=document.createElement("img");Car_Div.appendChild(CW_I);
CW_I.style.position="absolute";
CW_I.style.top=0+"px";
CW_I.style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I.style.borderStyle="solid";
CW_I.style.borderWidth=1+"px";
CW_I.style.borderColor=Car_Border_Color}
CW_I.src=Car_Image_Sources[2*i];
CW_I.lnk=Car_Image_Sources[2*i+1];
CW_I.onclick=C_LdLnk;
CW_I.onmouseover=C_Stp;
CW_I.onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I.style.left=C_LeftOffset+"px";
CW_I.style.width=C_ClcW+"px";
C_LeftOffset+=C_ClcW}
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=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=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="371" height="225">
</div>

<p><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href=" Drive</a></font></p>

</body>

</html>
 
Sort by date Sort by votes
I'm thinking this was the change you made?

Code: 
Car_Image_Sources=new Array(
            "storm1.jpg","C:\Documents and Settings\Cannuck3\My Documents\My Webs\myweb4\images",
        "bluejays.jpg","C:\Documents and Settings\Cannuck3\My Documents\My Webs\myweb4\images")

In which case the cause could be that the script requires you not use a Windows specific means to identify the path to your images (or requires you add in the file:// protocol).

When uploaded to a web site, you would put the path to the image (I'm guessing absolute path from the root of the website would be safest).

Here is one method to try - using the file:// protocol:

Code: 
Car_Image_Sources=new Array(
            "storm1.jpg","[!]file://[/!]C:\Documents and Settings\Cannuck3\My Documents\My Webs\myweb4\images",
        "bluejays.jpg","[!]file://[/!]C:\Documents and Settings\Cannuck3\My Documents\My Webs\myweb4\images")

You should also change all the backslashes to be forward slashes (although it works in Fx and IE either way, the correct form is to us forward slashes). So try this:

Code: 
Car_Image_Sources=new Array(
            "storm1.jpg","[!]file://[/!]C:[COLOR=blue][b]/[/b][/color]Documents and Settings[COLOR=blue][b]/[/b][/color]Cannuck3[COLOR=blue][b]/[/b][/color]My Documents[COLOR=blue][b]/[/b][/color]My Webs[COLOR=blue][b]/[/b][/color]myweb4[COLOR=blue][b]/[/b][/color]images",
        "bluejays.jpg","[!]file://[/!]C:[COLOR=blue][b]/[/b][/color]Documents and Settings[COLOR=blue][b]/[/b][/color]Cannuck3[COLOR=blue][b]/[/b][/color]My Documents[COLOR=blue][b]/[/b][/color]My Webs[COLOR=blue][b]/[/b][/color]myweb4[COLOR=blue][b]/[/b][/color]images")

Looking at the code, it treats every 2 (pair) array elements as a single image. It also looks like Car_Image_Sources[0] contains the path to the image, and Car_Image_Sources[1] contains a link to click on. Maybe I'm confused. If I am right, then you might try this (note that I have switched the array elements, and left the odd numbered elements as #):

Code: 
Car_Image_Sources=new Array(
            "[!]file://[/!]C:[COLOR=blue][b]/[/b][/color]Documents and Settings[COLOR=blue][b]/[/b][/color]Cannuck3[COLOR=blue][b]/[/b][/color]My Documents[COLOR=blue][b]/[/b][/color]My Webs[COLOR=blue][b]/[/b][/color]myweb4[COLOR=blue][b]/[/b][/color]images[b]/storm1.jpg[/b]","#",
        "[!]file://[/!]C:[COLOR=blue][b]/[/b][/color]Documents and Settings[COLOR=blue][b]/[/b][/color]Cannuck3[COLOR=blue][b]/[/b][/color]My Documents[COLOR=blue][b]/[/b][/color]My Webs[COLOR=blue][b]/[/b][/color]myweb4[COLOR=blue][b]/[/b][/color]images[b]/bluejays.jpg[/b]","#")

Lots of things to try. Do let us know how you get on!

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Hi Babyjeffy
Tried all 3 suggestted codes but still get error messages
Here is the site i got the java script from . I think the carosel is cool and am determined to get it to work for me.
I do get the carosel to go around but have little red x in the place where should be a picture. i tried to put a path the my photo which are in my image folder using your suggestions but then the carosel stops going a round and i get an error message.
Any other suggestions would be appreciated.
Cannuck3
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
376
Kennelbloke
Kennelbloke
chillay
  • Locked
  • Question
Add Control + F feature to a Web Page
Replies
3
Views
120
feherke
feherke
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
100
gmmastros
gmmastros
jimbospain
  • Locked
  • Question
script to read in files, parse and add to another file
Replies
1
Views
96
ggriffit
ggriffit
lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
144
lexer
lexer

Part and Inventory Search

Sponsor

Back
Top