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.

Special Notice – InfoFind Web Tools is focused on web application development such as database applications. InfoFind Web Tools does have some animation features but if you are looking only for animation scripts or larger control libraries you might want to check out one of the following JavaScript Libraries (, scripty2, jQuery, MooTools) or JavaScript Frameworks (Yahoo YUI, BBC Glow, Microsoft ASP.NET AJAX Control Toolkit). InfoFind Web Tools is written in a way so that is it easy to modify and copy individual functions that you need for your applications. Many updates will be coming in 2011 so please check back later.

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.
182165main_image_feature_867 182746main_image_feature_873 186766main_image_feature_894 210621main_08pd0202 222070main_angels1 222768main_GPN-2000-000880 224333main_PIA01341 225113main

Animation Type
Page Overlay Percent
Page Overlay Background Color
Page Overlay Background Image
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
Animation Time
Image Size