www.peterberger.at > BB template "filmstrip"
BB template "filmstrip"
[ About ] [ Download ] [ Customization ] [ Examples ]

example image

About the template
This is a HTML template for the picture browser BreezeBrowser. With this template you can easily generate a professional looking Web gallery where your photos on the index page look like a film strip. 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 "filmstrip" is free of charge. My HTML template "PBase" is free of charge. However if you want to honor my efforts a donation is welcome. :-)

Δ

Download
You can install the "filmstrip" template by downloading the file filmstrip.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 "filmstrip" underneath the template folder.
Δ
Customization
There are several simple ways to customize the look and function of the HTML gallery. In order to understand everything you should be familiar with BreezeBrowser´s HTML generation feature. You can find the help pages online too. But before you start reading I would recommend to have a look at the four example pages I created and check out what´s possible with this template...

In the "filmstrip" template folder you will find 5 HTML files, various GIF images and a "readme" text file. You can customize the template by opening the file "index_template.htm" in a text editor and change the value of some variables in the part marked as Customization:

indexMode = 0
In this mode the template automatically shows all thumbnails in landscape orientation first in a horizontal film strip. Followed by all thumbnails in portrait orientation in vertical film strips. This view is the most pleasing one. Note that the sort order may differ from your original order in BreezeBrowser!
indexMode = 1
If you set this variable to 1 then all thumbnails are shown in horizontal film strips only. Note that images in portrait orientation will be resized to fit in the strip. This mode doesn´t look as good as the previous one but your sort order is the same as in BreezeBrowser.
indexMode = 2
Set this variable to 2 to show all thumbnails in vertical film strips only. The same (dis)advantages apply as in the previous mode.

fullsizeMode = 0
If set to 0 the fullsize view will be loaded in the same window as the index view, which is the default in most of BreezeBrowser´s HTML templates. In this case the file "fullsize_template.htm" is used, which means you can replace it with other fullsize templates found in other template folders. If you use this mode with indexMode = 0 then you should note that the sequence of the images follows the original sort order and not the one shown on the index page (which is split by landscape & portrait orientated thumbs).
fullsizeMode = 1
Set this variable to 1 to show the fullsize view of the image in a popup window. The popup window will automatically resize itself according to the image size. The links to the previous and next image match the index view, even if the indexMode is set to 0! The fullsize view shows a nice frame around the photo.
fullsizeMode = 2
Set this variable to 2 if you want to combine the "filmstrip" template with the "frames" template. You only need to rename and copy one file to achieve this. See example 4 for more details. This mode should be used with indexMode set to 1 or 2.

numColumns = 5
Here you can specify the number of images in one landscape strip. In this example a new strip starts after every 5 thumbnails. Set is to a high value (i.e. 1000) if you want one endless film strip.

numRows = 4
Same as numColumns (see above) but you specify the number of images in a vertical strip.

invert = 1
If you set this variable to 1 then the thumbnails will be shown as "negatives". If you move your mouse over a thumbnail the image will appear in correct colors. Note that this effect works only with MS Internet Explorer.
invert = 0
The thumnails will appear as "positives" (unchanged).

shadow = 0
If you have a colored background or a background image then you should set the shadow variable to 0. Note that the holes will be rendered transparent which gives a much more realistic look.
shadow = 1
Set this variable to 1 to show drop shadows. Note that the shadow will also appear in the fullsize view (if the variable fullsizeAsPopup is set to 1). This setting is only recommended for a white background.
shadow = 2
Set this variable to 2 if you have a black or dark grey background. A fading white border will be shown around each film strip and also around the fullsize images (if the variable fullsizeAsPopup is set to 1).

These are some easy ways to modify the filmstrip template. You only need to know how to edit an HTML file with a text editor: do not double-click on it, instead use the right mouse button and select "Open with..." (and choose a text editor) from the menu or you simply drag the HTML file and drop it on a text editor.

If you have some basic HTML knowledge feel free to further customize the pages and change font and background colors, add a logo or some text. Check out the examples below to get some ideas.

Δ

Example 1
click for example 1... // Customization
// ------------------------
var indexMode = 0
var fullsizeMode = 1
var numColumns = 5
var numRows = 4
var invert = 1
var shadow = 1
// ------------------------

This is an example with the default settings, I only set the invert mode to 1 which renders the thumbnails as negatives (if you use MS Internet Explorer). Note that the thumbnails automatically get splitted in horizontal and vertical film strips (they were unsorted in BreezeBrowser). Also note that the sequence of the fullsize views follows the shown order and not the original order.

Δ

Example 2
click for example 2... // Customization
// ------------------------
var indexMode = 0
var fullsizeMode = 0
var numColumns = 5
var numRows = 1
var shadow = 0
// ------------------------
In this example page I combined the indexMode = 0 with the fullsizeMode = 0 (no popups) which means that I had to sort the images in BreezeBrowser before the HTML generation process. Otherwise the sequence shown on the index page would not match the sequence of the fullsize pages.

I set the shadow variable to 0 because the background of the page is not white. Small changes were made in the fullsize_template.htm to match the index page.

Δ

Example 3
click for example 3... // Customization
// ------------------------
var indexMode = 0
var fullsizeMode = 1
var numColumns = 2
var numRows = 1
var invert = 0
var shadow = 2
// ------------------------

If all of your photos have the same ratio then you don't have to worry about the thumbnail sizes, the film strip will always look "realistic". If the photo´s ratios differ then you have to pay attention that all thumbnails in landscape orientation have the same height and all thumbnails in portrait orientation have the same width.

Let me show an example with panoramic pictures (which look very nice with this template, BTW). In this gallery I show 4 panorama photos, all with different sizes and ratios. If you use the standard settings in BreezeBrowser (Web) then the resulting thumbs will be 120 pixels wide and have different heights. To overcome this problem you have to set a very large thumnail width (i.e. 800) and the exact thumnail height (i.e. 90). Now the resulting thumbs will have the same height, which looks much better in the film strip.

I set the shadow variable to 0 because the background is black.

Δ

Example 4
click for example 4... // Customization
// ------------------------
var indexMode = 1
var fullsizeMode = 2
var numColumns = 1000
var numRows = 1
var invert = 0
var shadow = 0
// ------------------------

This example shows you how to combine the "filmstrip" template with the "frames" template. Unfortunately this is not possible without some modifictations but they are simple: go to your "filmstrip" folder and rename the file "index_template.htm" to "index2_template.html". Then copy the file "index_template.htm" from the "frames" folder in your "filmstrip" folder. That´s it.

With the variable settings above you get one loooong horizontal filmstrip in one frame and the fullsize view in the other frame. In my example I put the index frame on the bottom of the window so that there is no ugly scrollbar between the two frames. Another idea is to show a vertical index film strip (indexMode = 2, numRows = 1000) on the left or right side of the window.

Δ

Diese Seite auf Deutsch...