✵ jQuery.HERmione.de ✍

Timeline

Tags	Timeline, Slider, animate
Abstract	Eine filmartige Animation mit Hilfe des jQuery UI Slider.
Zuletzt geaendert	2010-01-07 (von 2008-08-26)
Browser (getestet)	FF3.5, IE8
jQuery Version	1.3.2
Plugins	jQuery UI jQuery UI Slider Doku
Demos	Timeline
Hilfreiche Links	OSM History Beispiel mit der gleichen Technologie gany - eine Welt ensteht weiteres Beispiel mit aehnlicher Technologie

HTML

Im HTML wird ein leeres DIV fuer den Slider und eines fuer die Bilderfolge benoetigt.

<input id="play" type="button" value="play"/>
<div id="gallery">... gallery ..</div>
<div id="slider"></div>

CSS

Die Styles des jQuery UI Sliders koennen mit den beiden Klassen ui-slider-horizontal und ui-slider-handle ueberschrieben werden.

Das Bewegen des Sliders (JS)

In der Methode slide wird definiert, was beim Bewegen des Sliders passieren soll. Naemlich dass der Inhalt von #gallery manipuliert werden soll.

$("#slider").slider({
      min: 0,
      value: 100,
      slide: function (ev, ui) {
         timer = ui.value;
         index = timerToIndex(timer);
         $(".gaga").hide();
         $("#gaga_" + index).show();
      }, 
   });

Play/Pause (JS)

Mit der Option value kann der Slider an eine bestimmte Position gesetzt werden.

$("#slider").slider('option', 'value', timer)