www.peterberger.at > BB Template "filmstrip"
BB Template "filmstrip"
[ Allgemeines ] [ Download ] [ Anpassen ] [ Beispiele ]

Beispielbild

Allgemeines
Es begann mit der Idee die Fotos auf der Indexseite einer Webgalerie als Filmstreifen darzustellen. Aus dieser Idee wurde schließlich ein konfigurierbares HTML Template für den Bildbrowser BreezeBrowser. Mit dieser Software und meinem Template kann man ganz schnell eine professionell aussehende Webgalerie im "Filmstreifen-Look" generieren. Natürlich muss der BreezeBrowser zuerst installiert werden bevor man das Template anwenden kann. Man muss die Software nicht gleich kaufen, die Testversion hat alle Funktionen die man braucht, jedoch ist die maximale Anzahl der Bilder eingeschränkt. Mein HTML Template "filmstrip" ist gratis. Eine kleine Aufmerksamkeit in Form einer Paypal-Spende ist jedoch jederzeit willkommen. :-)

Δ

Download
Das Template "filmstrip" wird installiert indem die Datei filmstrip.zip auf die Festplatte geladen und anschließend in den Templatefolder (üblicherweise in C:\Programme\BreezeSys\BreezeBrowser\templates) extrahiert wird. Am Ende sollte sich das Directory "filmstrip" im Templatefolder befinden.
Δ
Anpassen
Es gibt einige Möglichkeiten das Aussehen und die Funktion der HTML Galerie zu ändern. Es kann nicht schaden wenn man sich vorher mit dem HTML-Generator des BreezeBrowsers vertraut macht. Die (englischen) Hilfeseiten sind online. Falls das Lesen der anschließenden Beschreibungen der Variablen zu mühsam ist, empfehle ich gleich die vier Beispielgalerien anzusehen. Die zeigen in Kürze was mit diesem Template alles möglich ist...

In dem Templatefolder "filmstrip" befinden sich 5 HTML-Dateien, einige GIF-Bilder und ein "readme" Textfile. Das Template kann ganz schnell angepasst werden indem man die Datei "index_template.htm" in einem Texteditor öffnet und die Werte der Variablen ändert, die in dem Bereich Customization gekennzeichnet sind:

indexMode = 0
Mit dieser Einstellung werden auf der Übersichtsseite automatisch zuerst alle querformatigen Bilder als Filmstreifen angezeigt, gefolgt von den hochformatigen in senkrechten Filmstreifen. Diese Variante sieht am realistischten aus. Auchtung: die Sortierreihenfolge kann sich natürlich von der im BreezeBrowser unterscheiden!
indexMode = 1
Wird diese Variable auf 1 gesetzt, dann werden alle Bilder auf der Übersichtsseite in horizontalen Filmstreifen angezeigt. Fotos im Hochformat werden hier in der Größe angepasst, sodass sie in den Filmstreifen passen. Das sieht zwar nicht so realistisch aus wie im vorigen Mode, aber dafür bleibt die Sortierreihenfolge erhalten. Eine weitere Anwendung wäre ein Endlosfilmstrifen, der in einem Frame angezeigt wird.
indexMode = 2
Setzt man die Variable auf 2 werden alle Bilder auf der Übersichtsseite in vertikalen Filmstreifen angezeigt. Es gelten die gleichen Vor- und Nachteile wie im vorigen Mode.

fullsizeMode = 0
Diese Variable legt fest welches Template für die Volldarstellung verwendet wird. Ist sie auf 0 gesetzt wird die Volldarstellung jedes Bildes in das gleiche Browserfenster geladen das auch die Übersichtsseite anzeigt. Das ist übrigens bei fast allen BreezeBrowser-Templates der Fall. Es wird die datei "fullsize_template.htm" verwendet, die jedoch leicht durch andere Volldarstellungs-Templates (aus anderen Templatefoldern) ersetzt werden kann. Wird diese Einstellung mit indexMode = 0 kombiniert, dann sollte man bedenken, dass ja die Reihenfolge der Bilder in der Volldarstellung nicht automatisch der auf der Übersichtsseite entspricht (wo die Bilder in Quer- und Hochformate getrennt angezeigt werden).
fullsizeMode = 1
Mit dieser Einstellung wird das Vollbild in einem Popup-Fenster angezeigt. Das neue Fenster richtet seine Größe automatisch nach der Bildgröße. Das Bild wird in einem Rahmen dargestellt. Weiters sind Links zum vorigen und nächsten Bild vorhanden sowie ein Link um das Fenster zu schließen. Die Bilderreihenfolge entspricht übrigens der der Übersichtsseite, sogar wenn indexMode = 0 gewählt wurde! Verwendet wird die Templatedatei fullsize2_template.htm.
fullsizeMode = 2
Die Variable sollte auf 2 gesetzt werden wenn man das "filmstrip" Template mit dem "frames" Template kombinieren will. Man muss dazu nur eine Datei umbenennen und kopieren. Im Beispiel 4 wird dieser Fall näher betrachtet. Bei diese Einstellung sollte die Variable indexMode auf 1 oder 2 gesetzt werden.

numColumns = 5
Hier kann man die maximale Bildanzahl pro horizontalem Filmstreifen definieren. Bei obigem Beispiel wird nach jedem fünften Bild ein neuer Filmstreifen begonnen. Für einen Endlos-Streifen muss man diesen Wert größer als die maximale Bildanzahl in der Galerie setzen (z.B. 1000).

numRows = 4
Gleich wie numColumns (siehe oben), aber für die senkrechten Filmstreifen.

invert = 1
Wird diese Variable auf 1 gesetzt, dann werden die Thumbnails als "Negative" angezeigt. Fährt man mit der Maus über das Bild werden die echten Farben dargestellt. Dieser Effekt funktioniert allerdings nur beim MS Internet Explorer.
invert = 0
Die Bilder auf der Übersichtsseite werden normal (unverändert) dargestellt.

shadow = 0
Ändert man die Templates so, dass ein farbiger Hintergrund oder ein Hintergrundbild dargestellt wird, dann sollte die shadow-Variable auf 0 gesetzt werden (kein Schatten). In diesem Fall werden die Löcher im Filmstreifen transparent angezeigt, damit die Hintergrundfarbe/-grafik durchscheinen kann.
shadow = 1
Mit dieser Einstellung wird ein schwarzer Schatten (auf weißen Hintergrund) rechts und unterhalb der Bilder angezeigt. Dies gilt sowohl für die Übersichtsseite als auch für die Volldarstellung, wenn fullsizeMode = 1 gewählt wurde (Popups). Die Schattenanzeige sollte nur bei einem weißem Hintergrund (default) angewendet werden.
shadow = 2
Wenn man den Hintergrund schwarz oder dunkelgrau wählt, dann sollte diese Variable auf 2 gesetzt werden. Jeder Filmstreifen wird dann mit einem weißem Schein angezeigt um ihn vom Hintergrund abzuheben. Bei der Einstellung fullsizeMode = 1 (Popups) wird auch das Vollbild in einem weißem Rahmen angezeigt.

Das waren einfache Möglichkeiten das Template anzupassen. Man mus dazu nur wissen wie man eine HTML-Datei in einem Texteditor ändern kann: nicht doppelklicken, sondern über das Rechte-Maus-Menü "öffnen mit..." wählen (und einen Texteditor angeben) oder das HTML-File einfach mit Drag&Drop in einen offenen Texteditor ziehen.

Mit etwas HTML-Grundwissen kann man weitere Anpassungen in den Templates durchführen, wie z.B. Hintergrundfarbe, Schriftart und -größe ändern, ein Logo oder zusätzlichen Text hinzufügen. Die folgenden Beispiele zeigen ein paar Ideen.

Δ

Beispiel 1
zum Beispiel 1... // Customization
// ------------------------
var indexMode = 0
var fullsizeMode = 1
var numColumns = 5
var numRows = 4
var invert = 1
var shadow = 1
// ------------------------

Das ist ein Beispiel mit den Default-Einstellungen - ich habe nur die Thumbnails mittels der invert-Variablen als Negative dargestellt (vorausgesetzt man verwendet den MS Internet Explorer). Man beachte dass die Bilder in der Übersichtsseite automatisch in Quer- und Hochformate getrennt wurden (im BreezeBrowser waren sie unsortiert). Die Bildfolge in der Vollansicht entspricht der der Übersichtsseite und nicht der im BreezeBrowser.

Δ

Beispiel 2
zum Beispiel 2... // Customization
// ------------------------
var indexMode = 0
var fullsizeMode = 0
var numColumns = 5
var numRows = 1
var shadow = 0
// ------------------------
Für diese Beispielgallerie habe ich den indexMode = 0 mit dem fullsizeMode = 0 (keine Popups) kombiniert. Das bedeutet, dass man im BreezeBrowser die Bilder nach Format sortieren sollte bevor man die HTML-Generierung durchführt. Sonst stimmt die Reihenfolge der Bilder auf der Übersichtsseite nicht mit der der Volldarstellung überein.

Die shadow-Variable wurde auf 0 gesetzt, weil der Seitenhintergrund nicht weiß ist. Außerdem habe ich die Datei fullsize_template.htm so geändert, dass das Design der Volldarstellungsseiten zur Übersichtsseite passt.

Δ

Beispiel 3
zum Beispiel 3... // Customization
// ------------------------
var indexMode = 0
var fullsizeMode = 1
var numColumns = 2
var numRows = 1
var invert = 0
var shadow = 2
// ------------------------

Wenn das Seitenverhältnis aller Bilder (eines Formats) gleich ist, dann braucht man sich um die Thumbnailgröße nicht zu kümmern (z.B. 120x120). Bei unterschiedlichen Seitenverhältnissen muss man jedoch darauf achten, dass alle Thumbnails im Querformat die gleiche Höhe haben bzw. jene im Hochformat die gleiche Breite.

Anhand von Panoramafotos ist das schnell erklärt. Wenn man die BreezeBrowser-Standardeinstellung "Web" bei der HTML-Generation verwendet, dann werden die Thumbnails 120 Pixel breit sein und unterschiedliche Höhen haben. Dieses Problem kann man leicht beheben indem man eine sehr große Thumbnailbreite angibt (z.B. 800) und die exakte Thumbnailhöhe (in dem Beispiel: 90). Jetzt haben alle Panoramafotos auf der Übersichtsseite die gleiche Höhe, was für einen "realistisch" aussehenden Filmstreifen auch notwendig ist.

Die shadow-Variable ist 2, weil ich einen schwarzen Hintergrund gewählt habe.

Δ

Beispiel 4
zum Beispiel 4... // Customization
// ------------------------
var indexMode = 1
var fullsizeMode = 2
var numColumns = 1000
var numRows = 1
var invert = 0
var shadow = 0
// ------------------------

Dieses Beispiel zeigt wie man das "filmstrip" Template mit dem "frames" Template kombiniert. Leider geht das nicht automatisch, aber die nötigen Schritte sind ganz leicht: im Ordner "filmstrip" muss man die Datei "index_template.htm" in "index2_template.htm" umbenennen. Dann kopiert man die Datei "index_template.htm" aus dem Odner "frames" in den Ordner "filmstrip". Das war´s.

Mit den oben gezeigten Variableneinstellungen erhält man einen laaaangen Filmstreifen in einem Frame und die Vollbildansicht im zweiten Frame. In meinem Beispiel habe ich den Filmstreifen unten im Fenster platziert damit die beiden Frames nicht durch einen Scrollbar getrennt sind. Als Variante könnte man auch einen langen horizontalen Filmstreifen generieren (indexMode = 2, numRows = 1000), den man links oder rechts in einem Frame anzeigt.

Δ

This page in English...