www.peterberger.at > BB template "JS Slideshow"
BB template "JS Slideshow"
[ About ] [ Download ] [ HTML Generation ] [ Customization ] [ Example ]
About the template
This is an HTML template for the image browser BreezeBrowser. With this template you are able to generate a Javascript slideshow of a selection of images. For full functionality please use BreezeBrowser version 2.8 or higher. You need to install BreezeBrowser first in order to use the template. You don´t need to buy the product, the trial version is fully functional but limited by the number of images it can handle. My HTML template "JS Slideshow" is free of charge. The original script was taken from www.codelifter.com.


You can install the "JS Slideshow" template by downloading the file js_slideshow.zip and extracting it to your default template directory (which is usually located at C:\Program Files\BreezeSys\BreezeBrowser\templates). You should end up with a directory called "js_slideshow" underneath the template folder.
HTML generation
You should be familiar with BreezeBrowser´s HTML generation feature. If not, please read the online help pages first.
click to enlarge...
In version 2.8 BreezeBrowser intruduced two template specific user settings in the HTML dialogue. The JS Slideshow template makes use of these two variables to set the caption and the speed. At the bottom of the HTML dialogue you will find two drop down boxes, "Caption" on the left and "Image delay" on the right side.

Note that the fullsize_template.htm file is emtpy on purpose. The only generated HTML file will be index.htm. Furthermore the thumbnail sized images won't be used for the slideshow. You can ignore or delete them.

The slideshow looks really good if all original images have the same ratio. In that case the generated images have the same size and no "image jumps" will be noticed during the slideshow.

Open the file index_template.htm in a text editor and look around. With some basic knowledge in CSS and HTML you should be able to adapt the page to your design. Note that the variable "SlideShowSpeed" can be set in the HTML dialog window.

The advantage of this Javascript slideshow is that is can be easily integrated in an existing page (see the changing thumbnails below and at the top of this page). To make this step easier I have added an alternate index template file which is stripped down to basic functions (index2_template.htm). The result can be found in the file index2.htm after the HTML generation. To integrate it in an existing HTML page simply add the Javascript code in the header part, add the onLoad function to the body tag and finally add the image to the HTML code.

Note that all images get pre-loaded before the slideshow starts. To make the visitors aware of the loading process the animated "loading..." Gif image is shown until all images are loaded.

click for example... This example slideshow shows 6 different images cycling in an endless loop. Click on the thumbnail to see a bigger version in a new window. If you are using Internet Explorer you will see a dissolve effect when the image changes. This is done by a Microsoft filter, hence the word-play "Fun with filters". The used Cokin filters and camera settings remain a secret... :-)

Diese Seite auf Deutsch...