WaBis

walter.bislins.ch

Zoom: Automatisch schliessen

Durch einen Klick auf ein gezoomtes Bild wird der Zoom wieder rückgängig gemacht. Manche Anwender wünschen sich, dass sich die Zoom-Funktion nach einer einstellbaren Zeit wieder automatisch schliesst.

Ich habe keine entsprechende Funtkionalität in die Zoom-Funktion programmiert. Ich bin der Ansicht, dass es kein guter Stil ist, wenn sich auf einer Webseite ständig Dinge bewegen, ohne dass der Anwender dies beeinflussen kann. Jeder Klick sollte genau eine Reaktion auslösen, Mausbewegungen sollten keine Aktionen auslösen und vonselbst sollte überhaupt nichts passieren. Alles Andere nervt gewaltig, vor allem im Zusammenspiel mit anderen Komponenten! Nicht vergessen sollte man auch, dass gewisse Interaktivitäten auf Touchscreens (z.B. iPad) nicht funktionieren, da es dort kein Maus-Move-Event und kein Hover-Event gibt.

Man kann jedoch die Zoom-Funktion relativ einfach dazu bringen, sich nach einer bestimmten Zeit selbst wieder zu schliessen. Hier die Lösung:

Es gibt eine Funktion ZoomOut mit welcher die Zoom-Funktion bei einem Klick geschlossen wird. Diese Funktion kann man auch von einem Timer aufrufen lassen. Man schreibt einfach eine Funktion TimerZoom, welche an Stelle von ZoomIn aufgerufen wird. TimerZoom setzt einen Timer, welcher nach einer bestimmten Zeit ZoomOut aufruft und ruft gleichzeitig die eigentliche Zoom-Funktion ZoomIn auf:

TimerZoom ersetzt ZoomIn:

<script type="text/javascript">
var UnzoomTimer = null;

function TimerZoom( aId, aPicFile, aTime ) {
  if (UnzoomTimer) { 
    // wenn der timer noch aktiv ist, jetzt stoppen:
    clearTimeout( UnzoomTimer );
    UnzoomTimer = null;
  }
  ZoomIn( aId, aPicFile );
  UnzoomTimer = setTimeout( ZoomOut, aTime );
}
</script>

Wichtig ist, dass die ersten Argumente von TimerZoom dieselben sind wie von ZoomIn, damit das automatische Preload der Zoom-Bilder weiterhin funktioniert (siehe auch weiter unten)!

Bei den Bildern im HTML-Code der Seite wird nun an Stelle von ZoomIn die neue Funktion TimerZoom gerufen:

<a href="javascript:TimerZoom('pic1','images/bild1.jpg',2000)">
<img id="pic1" src="images/bild1_klein.jpg" width="30" height="30" alt="">
</a>

<a href="javascript:TimerZoom('pic2','images/bild2.jpg',2000)">
<img id="pic2" src="images/bild2_klein.jpg" width="100" alt="">
</a>

Automatischer Preload

Durch das Ersetzen von ZoomIn mit TimerZoom werden die Zoombilder von der Zoom-Funktion nicht mehr automatisch gefunden und somit nicht vorausgeladen. Um dies zu korrigieren, muss der Zoom-Funktion mitgeteilt werden, wie die neue Funktion heisst. Dies macht man in den Einstellungen:

Zoom.ZoomFunctionName = 'TimerZoom';

Alternativ können die URL's der Zoom-Bilder auch der Funktion ZoomInit() übergeben werden:

ZoomInit( '../images/bild1.jpg', '../images/bild2.jpg' );

 - oder - 

ZoomInit( '../images/', [ 'bild1.jpg', 'bild2.jpg' ] );

Weitere Infos zur Seite
Erzeugt Donnerstag, 7. Januar 2010
von wabis
Zum Seitenanfang
Geändert Samstag, 18. Juli 2015
von wabis