WaBis

walter.bislins.ch

Zoom: Konfiguration

Die Zoom-Funktion kann den Bedürfnissen angepasst werden. Der Folgende Code darf irgendwo auf der Seite nach dem Include von zoom.js, aber muss vor ZoomInit() stehen.

In den Beispielen werden die Werte gesetzt, die als Standard einprogrammiert sind. Du kannst alle jene Zeilen einfach weglassen, wo du die Standardwerte verwenden willst.

Alternativ kannst du auch direkt die Werte in der Datei zoom.js manipulieren, damit sich die gemachten Änderungen auf alle Seiten mit der Zoom-Funktion auswirken.

Zoom Verhalten

<script type="text/javascript">
Zoom.BorderColor = 'black';
Zoom.BorderWidth = 1;
Zoom.SizeLimit = 'Window';
Zoom.HideSmall = false;  // to hide small image during zoom

Zoom.ZoomSpeed = 300;    // time to double size in ms or 0
Zoom.TimeSpan = 600;     // Max Time if ZoomSpeed > 0 or Fix Time for Zoom
Zoom.MinTimeSpan = 100;  // Min Time if ZoomSpeed > 0 or ignored if ZoomSpeed = 0

Zoom.EnableDblClick = true;
Zoom.NewWindowOnDblClick = false;
Zoom.ZoomWindowName = 'Zoom';
Zoom.ZoomWindowFeatures = ''; // e.g: 'innerWidth=%w, innerHeight=%h';

Zoom.ZIndex = 100; // z-index des Zoom-Bildes
Zoom.AddPosX = 0; // Offset zur Startposition des Zoom-Bildes
Zoom.AddPosY = 0;
</script>

BorderColor, BorderWidth
Mit BorderColor und BorderWidth kann der Rahmen um das Zoombild eingestellt werden. Ein BorderWidth von 0 bedeutet: keinen Rahmen.
SizeLimit
Legt fest, ob und auf welche Grösse das Zoom-Bild beschränkt werden soll. Ist SizeLimit = '', wird das Zoom-Bild in seiner Originalgrösse dargestellt. Ist SizeLimit = 'Window', wird die Grösse auf die Fenstergrösse des Browsers beschränkt. Ist SizeLimit die ID eines HTML-Elementes der Webseite, wird die Grösse des Zoom-Bildes auf die Grösse dieses Elementes beschränkt. Für weitere Einstellungen siehe Grösse des Zoom-Bildes.
HideSmall
Mit HideSmall kann eingestellt werden, ob das Vorschaubild während dem Zoomvorgang ausgeblendet werden soll (true).
ZoomSpeed, TimeSpan, MinTimeSpan
Mit ZoomSpeed kann eingestellt werden, wie schnell der Zoomvorgang vor sich gehen soll. Wenn ZoomSpeed = 0 ist, wird eine mit TimeSpan fest eingestellte Zeit für den Zoom vorgegeben. ZoomSpeed = 300 bedeutet, dass die Bildgrösse alle 300 Millisekunden verdoppelt wird. Wenn ZoomSpeed > 0 ist, kann mit TimeSpan die maximale Zeit und mit MinTimeSpan die minimale Zeit für einen Zoom festgelegt werden. TimeSpan und MinTimeSpan werden in Millisekunden angegeben.
EnableDblClick
Mit dem Wert true wird das Öffnen des Zoombildes in einem eigenen Fenster beim Doppelklick auf die Vorschau aktiviert.
NewWindowOnDblClick
Wenn dieser Wert false ist, wird das Zoom-Bild bei einem Doppelklick auf die Vorschau im gleichen Fenster angezeigt (nur das Bild alleine). Wenn dieser Wert true ist, wird das Zoom-Bild in einem neuen Fenster angezeigt. Mit ZoomWindowName und ZommWindowFeatures können Name und weitere Einstellungen des Fensters festgelegt werden.
ZoomWindowName
Name, den das neue Zoom-Fenster intern erhalten soll. Mit dem HTML-Attribut target kann in A-Tags auf diesen Namen verwiesen werden.
ZoomWindowFeatures
Legt fest, ob Toolbar, Scrollbar usw. im neuen Fenster angezeigt werden sollen oder nicht. Siehe JavaScript-Referenz der Funktion window.open() für eine Beschreibung der Features. Mit %w und %h kann auf die Breite und Höhe des Zoom-Bildes zugegriffen werden: ZoomWindowFeatures = 'width=%w, height=%h'.
ZIndex
ZIndex gibt die Z-Ebene an, auf der das Zoombild angezeigt wird. Der Wert sollte der höchste verwendete Wert von allen Elementen auf der Seite sein, damit das Zoombild nicht von anderen Elementen verdeckt wird.

Automatischer Preload

Standardmässig sucht sich die Zoom-Funktion alle Aufrufe von ZoomIn auf der HTML-Seite und sammelt die dort angegebenen URL's zu den Zoom-Bildern. Diese Zoom-Bilder werden intern im Hintergrund in den Browser heruntergeladen, damit sie schnell zur Verfügung stehen, wenn sie gebraucht werden.

Die Zoom-Bilder können jedoch auch explizit mit der Funktion ZoomInit angegeben werden. Das automatische Preload kann dann wiefolgt deaktiviert werden:

Zoom.AutoPreload = false;
ZoomInit( 'ZoomUrl1', 'ZoomUrl2', 'ZoomUrl3', ... );

 - oder -

ZoomInit( 'GemeinsamerPfad', [ 'ZoomBild1', 'ZoomBild2', ... ] );

Die Zweite Variante oben ist dann praktisch, wenn alle Bilder in einem bestimmten Verzeichnis liegen. Im ersten Argument GemeinsamerPfad wird der Pfad zu diesem Verzeichnis einmal angegeben. Bei den Bildern im zweiten Argument, dem Array, muss dann nur noch der Dateiname angegeben werden:

ZoomInit( '../images/', [ 'zoom1.jpg', 'zoom2.jpg', 'zoom3.jpg' ] );

Weitere Infos zur Seite
Erzeugt Donnerstag, 7. Januar 2010
von wabis
Zum Seitenanfang
Geändert Dienstag, 2. Dezember 2014
von wabis