PDA

View Full Version : Ultimate Fade-In Slideshow: how to use with attached .js file



be23
11-04-2009, 10:22 PM
1) Script Title: Ultimate Fade-In Slideshow

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

3) Describe problem: wanting to place this code into an .js file:

[CODE]
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [999, 265], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/images/slideshow/slideshow_1.jpg"],
["/images/slideshow/slideshow_2.jpg"],
["/images/slideshow/slideshow_3.jpg"],
["/images/slideshow/slideshow_4.jpg"] //<--no trailing comma after very last image element!
],

displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
[CODE]

Reason being is I use the slideshow on many many pages throughout the site, and to go in and change this code on each page would be very time consuming. I've tried adding it to the fadeslideshow.js but then the slideshow won't work.

ANY help/insight/suggestions would be incredibly appreciated!!

jscheuer1
11-05-2009, 05:41 AM
Virtually any javascript may be made external. This one is no exception. Here are the guidelines:

Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:


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

Common problems arise when:

1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:


<script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:
<script>
<!--and
//-->
</script>and any of their many variations from the beginning and end of the external file.

3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:


http://www.somedomain.com/images/button.gif

http://www.somedomain.com/~mysitename/index.html

5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex (see usage terms (http://www.dynamicdrive.com/notice.htm) for more info on this, especially item 4 from the terms):


<script src="some.js" type="text/javascript">
/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters, without which the script won't function.

There is also info here:

http://www.javascriptkit.com/javatutors/external.shtml

be23
11-05-2009, 03:58 PM
Hi John,

Thank you VERY much for your very detailed and simple explanation! Did what you said and works like a charm!

Have one question is there a way to combine the two .js files into one?

Again thank you so VERY much!

jscheuer1
11-05-2009, 04:15 PM
Sure, just put the short one (the one that used to be on the page), at the end of the main script. Just to be on the safe side add a space after the main script and a semi colon, ex:


. . . ie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"=" + value + ";path=/"
}
}

;

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [999, 265], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/images/slideshow/slideshow_1.jpg"],
["/images/slideshow/slideshow_2.jpg"],
["/images/slideshow/slideshow_3.jpg"],
["/images/slideshow/slideshow_4.jpg"] //<--no trailing comma after very last image element!
],

displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

be23
11-05-2009, 04:20 PM
Ahhh - that's the trick!! I was putting it at the top of the page (of the long script)!

Put it at the bottom and works like a charm!

Thank you again -much much appreciated!