To include this FX in your document you need to put the the following
in the HEAD section of your document
<!-- *** BEGIN CUT Start Simple Slide Show Code *** -->
<!-- *** You may use this code for free on any web page provided that
***
*** these comment lines and the following credit remain in the code.
***
*** Multimedia Transition Slideshow © from http://www.JavaScript-FX.com
*** --> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_SimpleSlisdeShow.js"></SCRIPT>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
mySlide1 = new JSFX.SimpleSlideShow();
mySlide1.addSlide("images/myimage1.gif");
mySlide1.addSlide("images/myimage2.gif");
mySlide1.addSlide("images/myimage3.png");
mySlide1.addSlide("images/myimage4.jpg");
function JSFX_StartEffects()
{
mySlide1.start();
}
//-->
</SCRIPT>
<!-- *** END CUT - End Code *** -->
Put the following in the BODY TAG of your document
<BODY onLoad="JSFX_StartEffects()">
Put the following HTML in the BODY where you want the slides to display
<script>document.write(mySlide1.toHtml());</script>
Customization.
To add images to your slideshow use the following
mySlide1.addSlide("images/description1.gif");
where "images/description1.gif" is the URL of the image to
display. (The URL is relative to the page in which the slideshow is defined.)
Advanced Cutomization..
To change the delay between slides
mySlide1.setSlideDelay(4);
To change the Transition Type (0 to 24 --- IE on MS Windows Only)
mySlide1.setTransType(24);
To change the Transition Duration (IE on MS Windows Only)
mySlide1.setTransDuration(2);
To install multiple slideshows all you have to do is create "new"
slideshow objects and add slides to each object. In the demo code that
is online and in the downloadable demo's the multiple slideshows are called
mySlide1, mySlide2, mySlide3 etc...
Here we are going to create 2 slideshows, one called baseballSlides
and one called carSlides. To do this you
place the following in the head section of your document.
<!-- *** BEGIN CUT Start Simple Slide Show Code *** -->
<!-- *** You may use this code for free on any web page provided that
***
*** these comment lines and the following credit remain in the code.
***
*** Multimedia Transition Slideshow © from http://www.JavaScript-FX.com
*** --> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_SimpleSlisdeShow.js"></SCRIPT>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
baseballSlides = new JSFX.SimpleSlideShow();
baseballSlides.addSlide("images/baseball/myimage1.gif");
baseballSlides.addSlide("images/baseball/myimage2.gif");
baseballSlides.addSlide("images/baseball/myimage3.png");
baseballSlides.addSlide("images/baseball/myimage4.jpg");
carSlides = new JSFX.SimpleSlideShow();
carSlides.addSlide("images/cars/bmw.jpg");
carSlides.addSlide("images/cars/ferarri.jpg");
carSlides.addSlide("images/cars/jaguar.jpg");
carSlides.addSlide("images/cars/lotus.jpg");
function JSFX_StartEffects()
{
baseballSlides.start();
carSlides.start();
}
//-->
</SCRIPT>
<!-- *** END CUT - End Code *** -->
The BODY tag stays the same and should look like :-
<BODY onLoad="JSFX_StartEffects()">
Put the following in the HTML of the BODY of your web page where you
want the Baseball slides to display :-
<script>document.write(baseballSlides.toHtml());</script>
Put the following in the HTML of the BODY of your document where you
want the Car slides to display :-
<script>document.write(carSlides.toHtml());</script>
For example, here we put the slideshows side by side in a table
<TABLE>
<TR>
<TD><script>document.write(baseballSlides.toHtml());</script></TD>
<TD><script>document.write(carSlides.toHtml());</script></TD>
</TR>
</TABLE>
Also See...
Using External ".js"
Files
Combining Multiple Scripts.
|