PDA

View Full Version : Ultimate Fade-In Slideshow as External .js



Snax
10-18-2006, 01:55 PM
1) Script: Ultimate Fade-In Slideshow (v1.5)
2) http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
3) Problem:

Hello all,

I am trying to save the <HEAD> script in an external js file (fadeimages.js) which is in the same directory as all my other HTML pages, and I have an images folder off that directory. As far as I know the js file has the correct path to the images. The slideshow works perfectly when everything is left in the one HTML but I am battling when using an external js.

I have had a good look around for an hour or two, and have worked through jscheuer's suggestions here: http://www.dynamicdrive.com/forums/showthread.php?t=10065 as well as several others elsewhere. I have no <!-- or --> hiding tags in the external file and am confident my paths are all sweet.

Initially I had the "'fadeshow' is undefined" error, which disappeared after I put " src="fadeimages.js" " with the script call in the BODY where the fadeshow() function is called. Well enough chit chat, here is some code :) :

External fadeimages.js


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

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/night1.jpg", "", ""]
fadeimages[1]=["images/night2.jpg", "", ""] //plain image syntax
fadeimages[2]=["images/dining.jpg", "", ""]
fadeimages[3]=["images/dining2.jpg", "", ""]
fadeimages[4]=["images/living.jpg", "", ""]
fadeimages[5]=["images/bedroom.jpg", "", ""]
fadeimages[6]=["images/day1.jpg", "", ""]

var fadebgcolor="white"

//// nothing edited beyond here, honest /////////////

...

</script>

BODY of index.html in question


<td width="600" height="240" valign="top">

<script src="fadeimages.js" type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.5): &#169; 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.
***********************************************/

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay)
new fadeshow(fadeimages, 600, 240, 0, 3000, 0, "R")
</script>
</td>

I wasn't sure if the credit lines were needed to actually get the thing to run, so have put them in a couple of spots. When I run thet page in IE everything looks fine... but no slideshow gets displayed. Also, currently I get a little "Syntax error" on Line 2, character 1 of my HTML page. Here is the HEAD of my index.html page (give or take):

HEAD of index.html


<!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=iso-8859-1" />
<meta name="description" content="a collection of words that will hopefully give my site props with Google" />
<meta http-equiv="imagetoolbar" content="no">

<title>My Website</title>

<link href="stylesheet.css" rel="stylesheet" type="text/css" />

<script language="javascript" src="fadeimages.js" type="text/javascript">

/***********************************************
* Ultimate Fade-In Slideshow (v1.5): &#169; 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.
***********************************************/
</script>

<!--This is a little script to disable right-clicking on images and a message pops up -->

<script language="javascript" type="text/javascript">
<!--
var message="Please contact us for images.";
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</script>

<!-- some style code that DW8 put in when I made my footer text smaller than the rest of the page as described in stylesheet.css -->

<style type="text/css">
<!--
.style5 {font-size: 9px}
-->
</style>
</head>

Many thanks, and I look forward to responses from anyone who has a little time to assist. I am all ears (and a lot of nose unfortunately).

Kind regards,
Snax

ddadmin
10-18-2006, 10:51 PM
Hi:
Did you make sure that your fadeimages.js doesn't actually contain the <script> tags? So it should look like:


var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["images/night1.jpg", "", ""]
fadeimages[1]=["images/night2.jpg", "", ""] //plain image syntax
fadeimages[2]=["images/dining.jpg", "", ""]
fadeimages[3]=["images/dining2.jpg", "", ""]
fadeimages[4]=["images/living.jpg", "", ""]
fadeimages[5]=["images/bedroom.jpg", "", ""]
fadeimages[6]=["images/day1.jpg", "", ""]

var fadebgcolor="white"

//// nothing edited beyond here, honest /////////////

...

Other than that, everything looks right.

Snax
10-19-2006, 10:19 AM
Hi there,

That worked! Thanks for your prompt and accurate response. I am obviously new to Javascript, and didn't realise the script tags weren't needed for an external js file. :o I now have that locked in for the future. Thinking about it now, it makes perfect sense with the script tag and "src" declared in the head of the html page already.

The only other change I had to make for it to work was to remove the 'src="fadeimages.js"' code from the script call in the BODY but leave it in the head as I had it.

Many thanks,
Snax

corydalus
03-05-2007, 08:29 PM
Kindly Experts,

OK, this is embarassing, but I seem to have the SAME problem with the very nifty Fadeshow; it works with the script in my header, but not as an external file. From what I see here, it SHOULD work.... Hair is being torn.

This is what I have in my file named fadeimages.js:

/***********************************************
* Ultimate Fade-In Slideshow (v1.5): 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]=["get1.jpg", "http://www.XXX.XXX.edu/", ""] //image with link syntax

fadeimages[1]=["get2.jpg", "http://www.XXX.XXX.edu/trans1/main.html", ""]

fadeimages[2]=["get3.jpg", "http://www.XXX.XXX.edu/", "_new"] //image with link and target syntax

var fadebgcolor="transparent"

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

(and I didn't!)

And this is what I have in my HTML:

<div id="picturebox-2" style="position:absolute; left:285px; top:150px; width:300px;height:355px">

<script src="fadeimages.js" type="text/javascript">

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 318, 318, 0, 20000, 1, "R")
</script>
</div>


The images, the .js file and the HTML file are all in the same folder as the HTML file. I am messing up, but how??

For the record, my expertise level is nonexistant. Thanks for any advice!

cory

corydalus
03-06-2007, 07:03 PM
All,

OK, I was making a basic amateur's error, but since other rank amateurs may see this...

I had missed the info that you need some code in both the head and body. This is what worked for me:

In The Head:
<script src="fadeimages.js"></script>

In the body (for me, within the division where I want the slideshow to appear):
<script>
//newfadeshow(images_etc etc...fadeimages etc etc"R")
</script>

NOTE: NO ATTRIBUTES IN THE BODY SCRIPT TAG

Many thanks to my company IT guy for figuring this out for me!

cory

jscheuer1
03-06-2007, 07:32 PM
Just a note on what corydalus discovered. You should have the type attribute on the script tag in the body:


<script type="text/javascript">

//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 318, 318, 0, 20000, 1, "R")
</script>

In fact, virtually all script tags should have the type attribute. This is so that they can be valid, and be compatible with earlier and later browsers.

What trips you up is if you have both a src attribute and then code enclosed in the tag. Only one will be executed, usually I believe, the code of the src attribute, with the code enclosed by the tag being ignored.

corydalus
03-06-2007, 09:30 PM
All,

John is spot on about the type attribute, as I discovered when I ran the page through the W3C HTML validator. In fact, their lack was causing an odd behavior in IE (a pretty recent version) in that when I tried to view the page, I got a message that IE was blocking scripts and/or ActiveX, and did I want to unblock these things. Choosing yes did allow me to see the fadeshow. After I corrected the code as instructed by the Validatrix, this IE behavior stopped happening.

cory

johnwboyd
02-21-2008, 11:07 PM
Thanks in advance. Can someone please look at my code and tell me why I am getting an error:
51 91 object expected: ')'
which when I remove the line in question most of my page seems to disappear?

Here is the link to my page: http://johnwboyd.info/drop_down/ and here's the code in the fadeimages.js.

I only removed the credit stuff:


var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["http://johnwboyd.info/philippines/images/home_0.jpg", "print4.htm", "Illustration"]
fadeimages[1]=["http://johnwboyd.info/philippines/images/home_1.jpg", "print.htm", "Business Print Collateral"]
fadeimages[2]=["http://johnwboyd.info/philippines/images/home_2.jpg", "web.htm", "Website"]
fadeimages[3]=["http://johnwboyd.info/philippines/images/home_3.jpg", "print2.htm", "Book Cover Illustration"]
fadeimages[4]=["http://johnwboyd.info/philippines/images/home_4.jpg", "web2.htm", "Email Ads"]
fadeimages[5]=["http://johnwboyd.info/philippines/images/home_5.jpg", "print4.htm", ""]
fadeimages[6]=["http://johnwboyd.info/philippines/images/home_6.jpg", "web.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: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%5b0%5d.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%5bpicindex%5d.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()
}

jscheuer1
02-22-2008, 02:43 AM
Here:



document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages%5b0%5d.src+'"></div>')

and elsewhere in your external script, the URI component entities for certain characters have somehow crept into the code. For example, in the above, %5b should be a [, and %5d should be a ].

I would suggest starting over, using only a plain text editor, and uploading the file via FTP in binary mode, rather than via a WYSIWYG editor like FP or DW. However, since I cannot with certainty guess how you uploaded it or how the substitution occurred, I can only say for sure that it must be corrected in the file that is on the server.

johnwboyd
02-22-2008, 06:05 PM
Ok I got the error out and both scripts are working now! The problem now is that the drop down is going behind the slide images. Can anyone help with this?

See here: http://johnwboyd.info/drop_down

Thanks!

jscheuer1
02-22-2008, 06:19 PM
From your cssverticalmenu.css stylesheet (add the red rule):


.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
z-index:100000;
}

johnwboyd
02-23-2008, 12:00 PM
Thanks jscheuer1. It works in firefox, but not IE though. http://johnwboyd.info/drop_down/

jscheuer1
02-23-2008, 03:25 PM
IE can be very particular about styles. I used this:


.glossymenu * {
z-index:10000;
}

which tells the browser that the z-index should get applied to all of the elements in the menu. Works here in IE 6 and 7.

johnwboyd
02-23-2008, 05:32 PM
What would be the full script (context) with this change?:

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
z-index:100000;
}

.glossymenu li{
position: relative;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
}

.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}

.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(arrow.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */

johnwboyd
02-23-2008, 05:45 PM
Ok I just put it near the bottom above: /* Holly Hack for IE \*/

Thanks a bunch!

jscheuer1
02-23-2008, 05:53 PM
I don't think it matters. If I thought that it did, I would have said so. Did you try it somewhere and have it not work for you? I put mine right on the page before the (first*) stylesheet link, so it could go at the top:


.glossymenu * {
z-index:10000;
}

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
z-index:100000;
}

.glossyme . . .

*I see you have both:


<link rel="stylesheet" type="text/css" href="cssverticalmenu.css">

and:


<link rel="stylesheet" type="text/css" href="cssverticalmenu.css" />

on your page, you should only need the first one, but that's not real important.

johnwboyd
02-23-2008, 06:02 PM
Can you please tell me how to get the drop down to line up with it's edge butting against the left outside edge of the white <td>? Also how to get the transparency to work in firefox?

johnwboyd
02-23-2008, 06:04 PM
Yes I deleted the extra one. thanks!

jscheuer1
02-23-2008, 06:24 PM
Here's one way:


<!--[if IE]>
<style type="text/css">
.glossymenu ul li {
padding-left:2px;
}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="cssverticalmenu.css">


<script type="text/javascript" src="cssvert . . .

johnwboyd
02-23-2008, 08:37 PM
Ok we're getting very close! (http://johnwboyd.info/drop_down) I just need the drop down to work over the flash in firefox and we got it. Please see here: http://johnwboyd.info/drop_down/disciples.htm

jscheuer1
02-24-2008, 06:10 PM
You know, this really has nothing to do with the Ultimate Fade-In Slideshow.

I did take a look at it. It looks as though FF just cannot distinguish between the mouse being over the menu and the mouse being over the flash. The wmode is set properly for the flash, so the only thing I can think of at the moment is that you may be able to insert a small iframe underneath the menu flyouts. This is a tricky business though, and may not take care of the problem.

How about starting a new thread on this?

Oh, BTW is this menu a DD menu or not? If not, start a new thread in the javascript section.

johnwboyd
02-24-2008, 08:48 PM
Yes I'll post there now. Thanks a lot for your help!