pics will not show up

**bcratz** · 10-21-2008, 02:10 PM

1) Script Title: Ultimate Fade-in slideshow

2) Script URL (on DD):http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: I have done all that was in the directions however, I just get a blank square... the correct size just no pics or hyp. I wonder if it is the way that I am setting the image paths. this is what it looks like prior to mod:
["photo2.jpg", "http://www.cssdrive.com", ""]

and this is how I am adding file path:
["img src=images/front page pics/Rail Mining/8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

does this look right or am I all screwed up?

**jscheuer1** · 10-21-2008, 03:07 PM

Neither, but it should be:

["images/front%20page%20pics/Rail%20Mining/8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]

There could also be other problems. If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

Note: Just

["images/front page pics/Rail Mining/8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

Should be fine in most cases, but in addition to getting rid of that img src= bit that doesn't belong, generally speaking, spaces in filenames and paths should be expressed as %20.

**bcratz** · 10-21-2008, 03:56 PM

my web site is www.brookvilleequipment.com
I dont have the mod page uploaded yet but it is the product frame. the frame that you see on the index page that has the 6 pics with the banner in the middle

I tried changing it but still no go. it is now a white square which is good just not what I need.
this is what it looks like now

fadeimages[0]=["J:\Website\images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]

**bcratz** · 10-21-2008, 04:09 PM

This is the complete code for my product page

<head>
<script type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages[1]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages[2]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages3[0]=["images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages3[1]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages3[2]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages4[0]=["images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages4[1]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages4[2]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages5[0]=["J:\Website\images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages5[1]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages5[2]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages6[0]=["images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages6[1]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages6[2]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter)

this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter

rogid

XImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter

rogid

XImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}

fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body bgcolor="000066"><center>
<table width="601" height="477" border="0">
<tr>
<td width="196" height="152" align="center" valign="top"><a href="minerubberhaulage.htm" target="_parent"></a><a href="aircraftground.htm" target="_parent"></a><a href="mineraillocomotive.htm" target="_parent"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 200, 150, 0, 3000, 1, "R")

</script></a></td>
<td width="196" align="center" valign="top"><a href="mineraillocomotive.htm" target="_parent"></a><a href="industrialswitcherbattery.htm" target="_parent"></a><a href="minerubberhaulage.htm" target="_parent"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages2, 200, 150, 0, 3000, 1, "R")

**bcratz** · 10-21-2008, 04:11 PM

the photos do not have the correct file path yet because I cant get the first one to work yet but this is what I have....

**jscheuer1** · 10-21-2008, 04:11 PM

That doesn't look like what I told you to use, but if the images are actually there (you have a J: drive???), it should work, but only locally. On the web, images must be referenced from their location on the host, not on your hard drive.

I'll try to make this real simple, where you now have:

J:\Website\images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg

That will only work if you can make a separate page with this on it:

<img src="J:\Website\images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg">

So basically what goes here:

Code:

fadeimages[0]=["", "mineraillocomotive.htm", ""]

Is what would go here in a normal image tag:

Code:

<img src="">

Now, this is just about all I can do for you unless you put the page up live for diagnosis purposes. That often solves problems, just in the doing, give it a shot if you are still unsure what to do.

**Nile** · 10-21-2008, 04:16 PM

Ummm... I think your wrong John, there is another way we can help:

Code:

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages[1]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages[2]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

var fadeimages3=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages3[0]=["images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages3[1]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages3[2]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

var fadeimages4=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages4[0]=["images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages4[1]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages4[2]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

var fadeimages5=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages5[0]=["J:\Website\images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages5[1]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages5[2]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

var fadeimages6=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages6[0]=["images\front%20page%20pics\Rail%20Mining\8801%203man%20RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages6[1]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]
fadeimages6[2]=["J:\Website\images\front page pics\Rail Mining\8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

For each fadeimages you have you have to give each a number, look above at the highlighted(This is what that section should be now).
In other words, you've can't have 5 of the same variables on the page.

**bcratz** · 10-21-2008, 04:40 PM

thanks guys that helped I got it working. this is what it looks like now:
fadeimages3[0]=["file:///J|/Website/images/front page pics/Rail Mining/8801 3man RailPC.jpg", "mineraillocomotive.htm", ""]

**Nile** · 10-21-2008, 04:45 PM

Did you also use my solution? If you didn't then your page won't work how you wanted.

**bcratz** · 10-21-2008, 08:11 PM

Well here's the story... I got alot of great feedback and help from you guys and i just have one more question. check this out in explorer, then in mozilla. why does it work with mozilla but not explorer?

http://www.brookvilleequipment.com