Hier eine Anleitung zum Einbau eines News Tickers mit Bildern die mit dem "bx-Slider" Skript belebt werden !
Als erstes benötigt man zwei Skripte die man sich HIER oder HIER runterladet !
Man benötigt nur diese Datei "jquery.bxSlider.min.js" und diese CSS Datei "jquery.bxslider.css"
Ich will hier nur ein Bespiel durchgehen für einen Vertikalen News Ticker mit Bildern die nur auf einer(bestimmten) Seite angezeigt werden.
Auf der ausgewählten Seite nimmt man ein "HTML-Widget" und platziert es an der gewünschten Stelle wobei man gleich die gewünschte "Höhe" (rechts unten bei Eigenschaften) einstellt. (Beispiel 900px)
Danach nimmt man den HTML-Code und kopiert ihn in das HTML-Objekt. (Ist eine einfache UL / LI Liste) Kann beliebt viel erweitert werden !
- <ul class="bxslider">
- <li><img src="/images/bild1.jpg" /></li>
- <li><img src="/images/bild2.jpg" /></li>
- <li><img src="/images/bild3.jpg" /></li>
- <li><img src="/images/bild4.jpg" /></li>
- <li><img src="/images/bild5.jpg" /></li>
- <li><img src="/images/bild6.jpg" /></li>
- <li><img src="/images/bild7.jpg" /></li>
- <li><img src="/images/bild8.jpg" /></li>
- </ul>
Die Bilder die man verwenden will in einen Order auf den Server spielen. (In diesem Code sind die in "images")
Danach geht man im HTML-Objekt zum Reiter "Erweitert" und fügt unten die zwei Dateien jquery.bxslider.css und jquery.bxSlider.min.js ein. (Wichtig Häkchen setzen bei "Datei mit Seite verknüpfen").
Danach geht man unter "2" unter Eigenschaften in den Reiter "Erweitert" und nimmt den folgenden Code und kopiert ihn unter "vor dem </body> Tag" rein.
Dieser Code bewirkt die
- vertikale Ausrichtung
5 sichtbare BilderSpalt zwischen den Bildern von 10pxbei Mouseover stoppt der Tickermit "speed" kann die Geschwindigkeit geregelt werden
Fertig !! Natürlich geht das ganze nicht in der Vorschau sondern nur am Server !!!!