PDA

View Full Version : problems with slideshow using fading transitions

jpage
01-30-2003, 08:54 PM
I am very new to javascript. I took a script from javascriptkit.com:

<html>
<head>
<script language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<img src="firstcar.gif" name="slide" width=100 height=56>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html>

I saved the images into my images folder and set it up with the paths to the images and all but it doesn't work for me for some reason. I've been messing with it for a few days now and it still doesn't work. It's probably some really dumb thing that I'm doing wrong, so if anyone could give me some advise I'd really appreciate it.
Mr J
01-31-2003, 06:12 PM
Have a play around with this one.



<HTML><HEAD><TITLE>Document Title</TITLE>

<SCRIPT language="javascript">
<!--
// Realised by Apachejeff
// www.huntingground.freeserve.co.uk
newTrans=new Array()
newTrans[newTrans.length] = "progid:DXImageTransform.Microsoft.fade(duration=3, overlap=0.5)";

mypic=new Array()
mypic[0]="pic1.jpg"
mypic[1]="pic2.jpg"
mypic[2]="pic3.jpg"
mypic[3]="pic4.jpg"
mypic[4]="pic5.jpg"
mypic[5]="pic6.jpg"
mypic[6]="pic7.jpg"

var mytext=new Array()
mytext[0]="Place your text"
mytext[1]="Within the mytext array"
mytext[2]="If no text is required"
mytext[3]="leave mytext[index No.] blank"
mytext[4]="yourtxt[4]=\"\""
mytext[5]="For more on trnsitions see my site"
mytext[6]=":-)"

var preloadpics=new Array() // preloads images
for (i=0;i<=mypic.length-1;i++) {
preloadpics[i]=new Image()
preloadpics[i].src=mypic[i]
}

var tranSpeed = 2.0; // how long transition takes in seconds
var pause = 2000 // in milliseconds
var advance = (tranSpeed*1000)+pause //
var i=0
var picnum=0

function RunSlide(){
Width=document.getElementById("picture").style.width
Height=document.getElementById("picture").style.height

picture.style.filter = newTrans[i];
picture.filters[0].apply();
picture.innerHTML = "<img src='"+mypic[picnum]+"'width='"+Width+"'height='"+Height+"'>"

text.innerHTML=mytext[picnum]

if(i==newTrans.length-1){
i=-1}
if(picnum==mypic.length-1){
picnum= -1}

picture.filters[0].play(tranSpeed);

picnum++
i++

setTimeout("RunSlide()",advance)
}

// include onload="RunSlide()" in the opening BODY tag

// -->
</SCRIPT>
</HEAD><BODY onload="RunSlide()">

<P><h1>Slide show with text</h1>
<DIV style="position:absolute; left:450; top:150px">
<div id="picture" onfilterchange="" style=" width:200; height:200; filter();"></div>
<P><div id="text" style="width:310"></div>
</DIV>
<P>Alter the positioning of the image and/or text by changing the attributes left and top within the "position" and "picture" divs.
<P>Alter the height and width of the images by changing the attributes within "picture" div.
<P>Enter images in mypics array.
<P>Enter text in mytext array.

</BODY>
</HTML>
jpage
01-31-2003, 07:59 PM
I tried your script. The text shows up nicely, but when the page loads; a broken image symbol fades in beautifully. What on earth am I doing that would make the images not show?

I copied your script into a new page and changed the images and the paths to them. like this "/images/picturename.gif" but they don't show up. Would you know why?

Thanks a lot for your help.
Mr J
01-31-2003, 08:44 PM
Strange indeed, please do this simple test ...please bear with me

Place the following in your page between the body tags.

Change YOURIMAGE.jpg for one of your images.

Make sure the file path and extention are correct.


<img src="YOURIMAGE.jpg">

Do you see your image?
Vladdy
01-31-2003, 08:54 PM
:D :D No transitions - no problems :D :D
And seriously do transition effects improve presentation to be worth the trouble :confused: :confused:
jpage
01-31-2003, 09:08 PM
yes the images show up fine when I place them straight into the page. They only don't work when their in the javascript.
Mr J
02-01-2003, 04:43 PM
It looks like the image path is wrong.

You have a forward slash at the beginning.

"/images/picturename.gif"


If the "images" folder is in the same folder as the HTML file then the path should be


"images/picturename.gif"

Try it and let me know
jpage
02-01-2003, 04:54 PM
It works! I knew it would be some obvious thing, strange that the paths worked outside of the javascript but not in it.

Thanks a lot for your help!