PDA

View Full Version : HELP with Ultimate Fade-in slideshow (v1.51)



alchemist
03-21-2009, 06:05 AM
Firstly i want to say AWESOME job dynamicDrive. I'm always impressed with your work, thank you.

1) Script Title: Ultimate Fade-in slideshow (v1.51)

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

3) Describe problem: I am a pretty new at understanding JAVA and I'm having problems getting this slideshow working on my site. I'm not sure if i'm modifying the correct code in order for MY OWN images to display and whether I'm placing the script in the correct area. Please see below

My image names are
house_01.jpg
house_02.jpg
house_03.jpg

Code that i've placed in my site (is this correct) ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.:: SUNCOAST CONSTRUCTIONS ::.</title>

<link rel="stylesheet" href="index.css" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="gradualfader.js">
</script>

<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/house_01.jpg", " ", ""] //plain image syntax
fadeimages[1]=["images/house_02.jpg", "", ""] //plain image syntax
fadeimages[2]=["images/house_03.jpg", "", ""] //plain image syntax

var fadebgcolor="white"


******************

I have placed this (below) in a DIV as this is where i require the slideshow to work. Is this correct? I have modified the image size as below (fadeimages, 590, 296, 0, 3000, 1, "R") IS there anything else here that i need to modify to make this slideshow work??


<div class="main_image"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 590, 296, 0, 3000, 1, "R")
</script></div>

I'm sure it's something very simple.

I appreciate your help.

jscheuer1
03-21-2009, 12:25 PM
Everything you show in your post looks OK. One thing though, you haven't really said what the problem is. I'm guessing that the images aren't showing up. If that's all it is, they're not where you are telling the script that they are. See also:

http://www.dynamicdrive.com/forums/showthread.php?p=190149#post190149

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.

alchemist
03-27-2009, 10:32 AM
I am still having problems getting the Ultimate Fade-in Slideshow working on my site. I have had no luck after MANY hours trying everything i can think of. It is getting very frustrating as i'm sure it's something simple.

Below is the complete HTML code for the home page i'm trying to get this working on.

The site is http://suncoastconstructions.com.au/ (THIS HAS NOT GOT THE Ultimate Fade-in Slideshow CODE INSERTED YET) below is the working file.

I hope you can help me.

Thank you.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>SUNCOAST CONSTRUCTIONS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="index.css" rel="stylesheet" type="text/css" />

<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/photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["Images/photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["Images/photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

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:progid:DXImageTransform.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:progid:DXImageTransform.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>
</head>
<body>
<div class="green">
<div id="slatenav">
<ul>
<li><a href="index.html" title="Suncoast Constructions" class="current"><br /><br />Home</a></li>
<li><a href="reno.html" title="Suncoast Constructions"><br /><br />Renovations</a></li>
<li><a href="new-house.html" title="Suncoast Constructions"><br /><br />New</a></li>
<li><a href="your-designs.html" title="Suncoast Constructions"><br /><br />Gallery</a></li>
<li><a href="about-us.html" title="Suncoast Constructions"><br /><br />About Us</a></li>
<li><a href="contact-us.html" title="Suncoast Constructions"><br /><br />Contact Us</a></li>
</ul>
</div>
</div>
<div class="banner"></div>
<div class="right_banner"></div>
<div class="main_image"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 590, 296, 0, 3000, 1, "R")
</script></div>
<div class="whats_hot"></div>
<div class="horizontal_gradient"></div>
<div class="bottom_reflection"></div>
<div class="key_image"></div>
<div class="bottom_nav"></div>
<div class="feature_box"></div>
<div class="feature_box_content">34 Post Office Rd, NAMBOUR</div>
<div class="main_content">
THINK SUNCOAST CONSTRUCTION
<p>Specializing in the construction of architecturally designed homes, renovations and extensions on the sunshine coast for over 25 years. Suncoast Constructions prides itself on its invaluable experience, high quality workmanship and an open and inclusive relationship with our clients.</p>
<p>We are committed to high standard construction from commencement to completion supporting environmentally sustainable building practices through the use of energy efficient products and technologies.</p>
<p>Here at Suncoast Constructions we can assist clients in the design of their dream home working with one of our associated architects, building designers or we can build from the clients own plans.</p>
<p>Suncoast Constructions joins our clients vision with our expertise to work towards an outcome that exceeds clients expectations.</p>
</div>
<div class="whats_hot_content_01">Supporting environmental building practices</div>
<div class="whats_hot_content_02">Renovations and extensions</div>
<div class="whats_hot_content_03">Committed to high standard construction</div>
<div class="whats_hot_content_04">Specializing in the construction of architecture</div>
<div class="whats_hot_content_05">Innovation, vision and expertise</div>
</body>
</html>

jscheuer1
03-27-2009, 12:00 PM
Well, that all looks OK, assuming you haven't edited the script itself or mangled it (perhaps by accident) in some way.

Here:


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

Those images are not on the server, for example:

http://suncoastconstructions.com.au/Images/photo1.jpg

is a 404 not found. As is (going back to your first post):

http://suncoastconstructions.com.au/images/house_01.jpg

But none of that may really matter (though it may, I just can't tell from here if where you have the page in your test environment that you have the images required or not, or if the code is exactly like in your post or not). Since you obviously have a site, and some code - Why not put up a test page? It need not work, nor need it be linked to any other pages on your site.

Once you have that and post a link to it here, I can probably solve the problem in one post. Without it, I can only engage in guessing games.

alchemist
03-28-2009, 03:31 AM
John,

Thank you for all of your help, it was very much appreciated!

I was just uploading a test html and css file for you and noticed that i was calling my images "photo.jpg.jpg" As soon as i renamed them it worked straight away.

Again, thanks :)

Don't you love the feeling when it comes together.
Ross

jscheuer1
03-28-2009, 06:02 AM
Don't you love the feeling when it comes together.

Absolutely.

Vermonter
02-23-2010, 04:50 PM
i want to add link title (tooltip) to links referenced in
Ultimate Fade-In Slideshow (v1.51)

but when i do as follows --
- link works fine
- but, tooltip text doesn't appear on slideshow image

var fadeimages=new Array()

//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["/images/0.jpg", "/main.html", "tooltip text"] //plain image syntax
fadeimages[1]=["/images/1.jpg", "/main.html", "tooltip text"] //plain image syntax
fadeimages[2]=["/images/2.jpg", "/main.html", "tooltip text"] //plain image syntax

Thanks, JT

jscheuer1
02-24-2010, 01:45 AM
Please start a new thread for a new question and follow the posting guidelines in this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6).