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.
|