How to create a animated photo slide show with InfoFind Web Tools

About InfoFind Web Tools

InfoFind Web Tools is for web page designers and developers and it is completely free to use in commercial or open source products and for either business or personal web pages. It contains several JavaScript Files that help make web pages more interactive. Many of the features can be used without having to write any JavaScript code and it is designed to work with all popular browsers on Windows, Mac, and Unix/Linux. Some of the features of InfoFind Web Tools include:

• HTML Table Sorting
• Animated Picture Slide Shows
• Web Page Animation
• Advanced Form Validation
• Functions for working with Data Types (Strings, Numbers, Currency, etc)
• Functions for working with Web Pages, CSS Scripts, and Individual Elements
• Page Updates through Web Requests (AJAX)

To see many useful demos of InfoFind Web Tools and to have all versions including InfoFind_Lite then click here to download InfoFind Web Tools, demo files, and documentation.

Creating Photo Slide Shows

InfoFind desktop application for Windows allows anyone to easily create photo and picture slide shows. There are many ways that the slide shows can be used such as adding it to a web site or creating a picture CD/DVD. If you want to customize the slide show you can use InfoFind Web Tools to do so.

To add a slide show to an existing web page, first add the JavaScript file [InfoFind.js] to the page:

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

Then add the style "SlideShow" to the CSS class of each link of an image that you want to display in the slide show.

 <a href="Picture1.jpg" class="SlideShow"><img src="Thumbnail1.jpg"></a>

Sample Slide Show

To see the slide show click on any of the images below and to change properties (effects, colors, etc) for the slide show select values from the controls below it.

Animation Type	Advanced Simple None
Page Overlay Percent	0 25 50 75 100
Page Overlay Background Color	Black Red Green Blue Yellow
Page Overlay Background Image	url(OverlayBackground.png) In most browsers, if the background image is set then the background color will need to be set to something other then black in order for the image to display.
Page Overlay ZIndex	The property [PageOverlayZIndex] is set to 1 by default but can be changed if need for the page that displays the slide show.
Display Image Seconds	0 1 2 3
Animation Time	0.5 1 2
Image Size	0.5 0.75

JavaScript need to create the above Slide Show

Note – if the background image is set and you use it in a slide show then you would need to copy the image to your computer or CD that has the slide show.