WaBis

walter.bislins.ch

Zoom: Grösse und Positionierung

Zoom : Download | Installation | Grösse und Positionierung | Konfiguration | Fehlersuche | Auto-Close | Cursor

Die Zoom-Funktion bietet verschiedene Möglichkeiten, die Zoombilder auf der Seite zu positionieren. Einerseits kann man globale Einstellungen vornehmen. Andererseits können diese auch für jedes einzelne Bild individuell geändert werden.

Grösse des Zoom-Bildes

Wenn ein Zoom-Bild vollständig im Fenster des Browsers Platz hat, wird es in seiner vollen Grösse, d.h. im Massstab 1:1 angezeigt. Ist das Browser-Fenster zu klein, hängt es von Zoom.SizeLimit ab, auf welche Grösse das Zoom-Bild beschränkt wird. Standard ist Zoom.SizeLimit = 'Window'.

<script type="text/javascript">
Zoom.SizeLimit = 'Window';
</script>

Mögliche Werte für SizeLimit sind:

Leerstring ('')
Zoom-Bilder werden immer in voller Grösse 1:1 angezeigt. Teile, die nicht mehr im Browser-Fenster Platz haben, werden abgeschnitten. Mit Scrollen können diese Teile jedoch ins Blickfeld geschoben werden.
'Window' (Standardwert)
Die Grösse der Zoom-Bilder wird auf die Grösse des Brwoser-Fensters beschränkt. Das Seitenverhältnis des originalen Zoom-Bildes wird beibehalten.
'WindowWidth'
Das Zoom-Bild nutzt die ganze Fenster-Breite aus. Ist das Bild höher als das Browser-Fenster, wird es oben oder unten beschnitten. Diese Option macht bei Anzeigen Sinn, welche im Hoch oder Querformat aufgestellt werden können (Smart Phones, Tablets).
'WindowHeight'
Das Zoom-Bild nutzt die ganze Fenster-Höhe aus. Ist das Bild breiter als das Browser-Fenster, wird es rechts (oder links) beschnitten.
'WindowFill'
Zoombilder die horizontal und vertikal grösser als das Browser-Fenster sind werden so in der Grösse beschränkt, dass es möglichst klein dargestellt wird, aber das Fenster vollständig ausfüllt. Das Bild wird entweder an den Seitenrändern oder am oberen und unteren Rand beschnitten.
HTML-ID
Durch Angabe einer HTML-Id kann die Grösse des Zoom-Bildes und seine Position auf dieses HTML-Element beschränkt werden. Wenn das HTML-Element teilweise ausserhalb des Browser-Fensters liegt, wird das Zoom-Bild in das Browser-Fenster geschoben. Mit dieser Option kann man Zoom-Bilder z.B. auf Layout-Spalten beschränken.

Bei Änderungen der Browser-Fenstergrösse oder Orientierung, während ein Zoom-Bild dargestellt wird, wird dieses nach der Änderung der Fenstergrösse automatisch verschoben und der neuen Grösse angepasst.

Globale Positionierung

Die globalen Einstellungen für die Positionierung der Zoombilder wird für alle jene Bilder verwendet, bei denen keine individuellen Einstellungen gemacht werden. Die globale Positionierung der Zoombilder kann horizontal und vertikal unabhängig voneinander eingestellt werden. Es gibt zwei mögliche Bezugssysteme für die Positionierung:

  • Absolute Positionierung bezüglich des Browser Fensters
  • Relative Positionierung bezüglich eines Elementes der Webseite

Die globale Standard-Positionierung ist wiefolgt eingestellt:

<script type="text/javascript">
Zoom.HAlign = 'ToCenter'; // 'Left', 'Center', 'Right', 'Relative'
Zoom.VAlign = 'ToMiddle'; // 'Top', 'Middle', 'Bottom', 'Relative'
Zoom.HMargin = 0;
Zoom.VMargin = 0;
Zoom.TargetElement = '';
Zoom.TargetOffsetX = 0;
Zoom.TargetOffsetY = 0;
</script>

Globale absolute Positionierung

Es gibt die folgenden Einstellungen zur absoluten Positionierungen bezüglich des Browser-Fensters:

  • Zoom.HAlign: Left, Right, Center, ToCenter (Standard)
  • Zoom.VAlign: Top, Bottom, Middle, ToMiddle (Standard)
Left, Right, Top, Bottom
Bei den Einstellungen Left, Right bzw. Top und Bottom kann mit HMargin bzw. VMargin eingestellt werden, wie weit die Zoombilder vom Fensterrand positioniert werden sollen.
Center, Middle
Das Zoombild wird genau in die Mitte des Browser-Fensters positioniert.
ToCenter, ToMiddle (Standard)
Bei dieser Einstellung positioniert sich das Zoombild in Richtung Fenstermitte und zwar wiefolgt:
Denke dir eine Linie vom Zentrum des kleinen Bildes zum Zentrum des Browser-Fensters. Wenn das Zoombild 2/3 so gross ist wie das Browser-Fenster, wird sein Zentrum 2/3 auf dieser Linie in Richtung Fenstermitte bewegt. Wenn das Zoombild kleiner ist entsprechend weniger weit. Dies ergibt eine «gefälligere» Darstellung für nicht allzu grosse Zoombilder.

Die Zoom-Funktion versucht das Bild immer möglichst ganz innerhalb des Fensters zu platzieren. Wenn also aufgrund einer Margin-Einstellung das Zoombild teilweise ausserhalb des Fensters zu liegen käme, wird es ins Fenster zurück geschoben. Wenn es nicht vollständig innerhalb des Fensters Platz hat, wird es oben/links-Bündig platziert.

Globale relative Positionierung

Zoombilder können auch bezüglich eines beliebigen Elementes auf der Webseite positioniert werden. Der Punkt links oben des Zoombildes bezieht sich dann auf den Punkt links oben des Bezugselementes. Die globale relative Positionierung wird wiefolgt eingestellt:

<script type="text/javascript">
Zoom.HAlign = 'Relative';
Zoom.VAlign = 'Relative';
Zoom.TargetElement = 'ZoomPos';
Zoom.TargetOffsetX = 0;
Zoom.TargetOffsetY = 0;
</script>

TargetElement
ID eines beliebigen Bezugselementes auf der Webseite.
TargetOffsetX, TargetOffsetY
Die Position links oben des Zoombildes kann um einen Offset bezüglich des Bezugselementes in X- und Y-Richtung verschoben werden.

Das Bezugselement muss eine eindeutige ID bekommen, welche man der Zoom-Funktion mit TargetElement bekannt gibt. Jedes beliebige HTML-Element kann als Bezugselement dienen.

Beispiel:

<div id="ZoomPos" style="width:300px; height:200px">
In diesem Bereich werden die Zoombilder angezeigt...
</div>

Individuelle Positionierung

Die globalen Einstellungen für die Zoombilder können für jedes einzelne Zoombild überschrieben werden. Die individuelle Positionierung ist jedoch immer relativ zu einem Bezugselement. Als Bezugselement kann auch das Vorschaubild selbst dienen.

Die individuelle Positionierung wird beim Aufruf der Funktion ZoomIn vorgenommen:

ZoomIn( ID, ZoomUrl, XOffset, YOffset, RefElementID )
ID
ID des HTML-Elementes, bei dem der Zoom beginnen soll. Dies ist in der Regel die ID des Vorschaubildes, kann aber ein beliebiges HTML auf der Seite sein.
ZoomUrl
Pfad und Dateiname des Zoombildes.
XOffset, YOffset (Optional)
Die Position relativ zum Bezugselement kann um einen Offset in X- und Y-Richtung verschoben werden.
RefElementID (Optional)
ID des HTML-Elementes, bezüglich dem das Zoombild positioniert werden soll. Wird dieses Argument nicht angegeben, wird das Element ID selbst zum Bezugselement.

Hinweis: Wenn keines der optionalen Argumente angegeben wird, so werden für das Zoombild die globalen Einstellungen verwendet. Sobald eines der optionalen Argumente angegeben wird, werden die globalen Einstellungen überschrieben. Dabei wird das Zoombild immer relativ zu einem HTML-Element positioniert, entweder zum Element ID oder falls angegeben zum Element RefElementID.

Beispiel

 :
<a href="javascript:ZoomIn('pic1','zoom1.jpg',0,0,'ZoomPos1')">
<img id="pic1" src="vorschau1.jpg" width="200" height="150" alt="...">
</a>
 :
<div id="ZoomPos1" style="width:400px; height:300px;">
Hier wird das Zoombild angezeigt...
</div>

Im Beispiel oben wird ein div-Element auf der Seite platziert, in welchem alle Zoombilder angezeigt werden sollen. Das div-Element erhält die ID ZoomPos1. Beim Aufruf der Funktion ZoomIn wird diese ID als Argument übergeben.

Das Zoombild startet beim img-Element mit der ID pic1 mit der Grösse dieses Elementes und zoomt zum div-Element mit der ID ZoomPos1. Dabei wird das Zoombild in seiner originalen Grösse angezeigt.

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