gbTicker v1.1
Ein animierter Newsticker mal anders. Mit gbTicker können mehr Informationen dargestellt werden, die in ein einfaches Laufband nicht platzieren kann. Zudem werden die einzelnen Themen übersichtlicher angezeigt. Die JavaScript Klasse erlaubt es den Benutzer die Animation anzuhalten und abzuspielen. gbTicker eignet sich auf Webseiten bei denen häufig und viele Neuigkeiten veröffentlicht werden und diese nicht viel Platz einnehmen sollen. Es können zu den Texten natürlich auch Bilder eingebunden werden.
Demo
Ticker vertikal
Saturn
Quelle: Wikipedia
Der Saturn ist mit einem Äquatordurchmesser von etwa 120.500 km der zweitgrößte Planet des Sonnensystems und wird in seiner Größe nur von Jupiter übertroffen. Saturn ist mit einer durchschnittlichen Entfernung zur Sonne von knapp 1,43 Milliarden km der sechste Planet des Sonnensystems, seine Bahn verläuft zwischen der von Jupiter und der des sonnenferneren Uranus. Er ist der äußerste Planet, der mit bloßem Auge problemlos erkennbar ist, und war daher schon Jahrtausende vor der Erfindung des Fernrohrs bekannt.Andromeda
Quelle: Wikipedia
Die Andromedagalaxie (von der historischen Bezeichnung her auch Andromedanebel oder Großer Andromedanebel sowie manchmal auch fälschlich Andromeda-Galaxis genannt) ist eine Spiralgalaxie vom Typ Sb. Sie ist im Messier-Katalog als M 31 und im New General Catalogue als NGC 224 verzeichnet. Am Sternenhimmel ist sie im Sternbild Andromeda, nach dem sie benannt ist, zu finden. In klaren Nächten kann die Andromedagalaxie von einem dunklen Standort aus mit bloßem Auge gesehen werden. Sie ist das fernste Objekt, das regelmäßig mit bloßem Auge gesehen werden kann.Carinanebel
Quelle: Wikipedia
Der Carinanebel (NGC 3372), auch Eta-Carinae-Nebel, ist ein Emissionsnebel im Sternbild Kiel des Schiffs. Er hat eine scheinbare Helligkeit von +3,00 mag und einen Durchmesser von 120 Bogenminuten. Der Nebel ist eine der größten HII-Regionen der Galaxis und befindet sich in einer Entfernung von etwa 6.500 bis 10.000 Lichtjahren von der Erde. Damit erstreckt er sich über etwa 200-300 Lichtjahre. Das bekannteste Einzelobjekt im Carina-Nebel ist der veränderliche Stern ? (Eta) Carinae, der Teil des offenen Haufens Trumpler 16 ist.
Ticker horizontal
Saturn
Quelle: WikipediaDer Saturn ist mit einem Äquatordurchmesser von etwa 120.500 km der zweitgrößte Planet des Sonnensystems und wird in seiner Größe nur von Jupiter übertroffen. Saturn ist mit einer durchschnittlichen Entfernung zur Sonne von knapp 1,43 Milliarden km der sechste Planet des Sonnensystems, seine Bahn verläuft zwischen der von Jupiter und der des sonnenferneren Uranus. Er ist der äußerste Planet, der mit bloßem Auge problemlos erkennbar ist, und war daher schon Jahrtausende vor der Erfindung des Fernrohrs bekannt.Andromeda
Quelle: WikipediaDie Andromedagalaxie (von der historischen Bezeichnung her auch Andromedanebel oder Großer Andromedanebel sowie manchmal auch fälschlich Andromeda-Galaxis genannt) ist eine Spiralgalaxie vom Typ Sb. Sie ist im Messier-Katalog als M 31 und im New General Catalogue als NGC 224 verzeichnet. Am Sternenhimmel ist sie im Sternbild Andromeda, nach dem sie benannt ist, zu finden. In klaren Nächten kann die Andromedagalaxie von einem dunklen Standort aus mit bloßem Auge gesehen werden. Sie ist das fernste Objekt, das regelmäßig mit bloßem Auge gesehen werden kann.Carinanebel
Quelle: WikipediaDer Carinanebel (NGC 3372), auch Eta-Carinae-Nebel, ist ein Emissionsnebel im Sternbild Kiel des Schiffs. Er hat eine scheinbare Helligkeit von +3,00 mag und einen Durchmesser von 120 Bogenminuten. Der Nebel ist eine der größten HII-Regionen der Galaxis und befindet sich in einer Entfernung von etwa 6.500 bis 10.000 Lichtjahren von der Erde. Damit erstreckt er sich über etwa 200-300 Lichtjahre. Das bekannteste Einzelobjekt im Carina-Nebel ist der veränderliche Stern ? (Eta) Carinae, der Teil des offenen Haufens Trumpler 16 ist.
Einbinden
- Laden Sie die benötigt Daten » hier herunter.
- Binden Sie die JavaScript Dateien in Ihrer Seite ein.<script type="text/javascript" src="js/moo1.3.1_compile.js"></script>
<script type="text/javascript" src="js/gbticker_compile.js"></script> - Legen Sie einen Haupt-Container an, das den Ticker begrenzen soll.<div class="gbTicker"></div>
- Legen Sie einen weiternen Container in den Haupt-Container an, in dem Ihre Informationen als Listeneintrag stehen werden.<div class="gbTicker">
<div class="contentTicker"></div>
</div> - In diesen Container werden nun Ihre Inhalte in einer Liste stehen. Wichtig hierbei ist die Vergabe einer eindeutigen Identifikationsnamen (id), die der Klasse übergeben werden muss.<div class="gbTicker">
<div class="contentTicker">
<ul id="itemTicker">
<li>Inhalt mit Text und Bild</li>
<li>Inhalt mit Text und Bild</li>
<li>Inhalt mit Text und Bild</li>
</ul>
</div>
</div> - Optional können Sie Schaltflächen anlegen, um dem Benutzer die Möglichkeit zu geben den Newsticker zu steuern. Wichtig hierbei ist, dass die Schaltflächen eine eindeutige Identifikationsnamen (id) vergeben werden. Diese id kann dann der Klasse übergeben werden.<div class="gbTicker">
<div class="contentTicker">
<ul id="itemTicker">
<li>Inhalt mit Text und Bild</li>
<li>Inhalt mit Text und Bild</li>
<li>Inhalt mit Text und Bild</li>
</ul>
</div>
<div class="btn">
<img src="img/btn_pause.gif" alt="stop" id="btn_stop" />
<img src="img/btn_play.gif" alt="play" id="btn_play" />
</div>
</div> - Weisen Sie der Klasse noch Optionen zu, die übergeben werden sollen und erstellen ein neues Objekt.<script type="text/javascript">
var gbTickerOpt = {
handler: 'itemTicker',
btnStop: 'btn_stop',
btnPlay: 'btn_play',
current: 1,
delay: 3,
play: true,
duration: 1,
transition: Fx.Transitions.Expo.easeOut,
vertical: true
};
var myTicker = new gbTicker(gbTickerOpt);
</script>
Quellcode
<script type="text/javascript" src="js/gbticker_compile.js"></script>
<div class="gbTicker">
<div class="contentTicker">
<ul id="itemTicker">
<li>Inhalt mit Text und Bild</li>
<li>Inhalt mit Text und Bild</li>
<li>Inhalt mit Text und Bild</li>
</ul>
</div>
<div class="btn">
<img src="img/btn_pause.gif" alt="stop" id="btn_stop" />
<img src="img/btn_play.gif" alt="play" id="btn_play" />
</div>
</div>
<script type="text/javascript">
var gbTickerOpt = {
handler: 'itemTicker',
btnStop: 'btn_stop',
btnPlay: 'btn_play',
current: 1,
delay: 3,
play: true,
duration: 1,
transition: Fx.Transitions.Expo.easeOut,
vertical: true
};
var myTicker = new gbTicker(gbTickerOpt);
</script>
Erläuterung
- handler
Tragen Sie hier die id ein, die Sie der Liste vergeben haben.
Z.B. 'itemTicker' - btnStop, btnPlay
Hier tragen Sie die id für die Steuerelemente ein.
Z.B. 'btn_stop', 'btn_play' - current
Die Zahl die Sie hier eintragen, beeinflusst den Startpunkt. Sie können somit mit einer beliebigen Nachricht beginnen.
Z.B. 1 - delay
Geben Sie an, wie viel Sekunden eine Information stehen bleiben soll.
Z.B. 3 - play
Mit einen booleschen Wert (true oder false) können Sie beeinflussen, ob der Newsticker abgespielt werden soll. true steht für abspielen und false für nicht abspielen.
Z.B. true - duration
Einstellung für die Geschwindigkeit der Animation.
Z.B. 'short', 'normal', 'long' oder eine Zahl für Sekunden - transition
Diese Einstellung gibt den Ablauf der Animation an. Mehr dazu finden Sie bei
» MooTools
Z.B. Fx.Transitions.Expo.easeOut, Fx.Transitions.Linear.easeOut - vertical
Hier können Sie die Richtung (vertical=true oder horizontal=false) festlegen in die die Animation laufen soll.
Z.B. true
