News ticker mit Bildern (bx-Slider Vertikal)

  • 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 !


    HTML
    1. <ul class="bxslider">
    2. <li><img src="/images/bild1.jpg" /></li>
    3. <li><img src="/images/bild2.jpg" /></li>
    4. <li><img src="/images/bild3.jpg" /></li>
    5. <li><img src="/images/bild4.jpg" /></li>
    6. <li><img src="/images/bild5.jpg" /></li>
    7. <li><img src="/images/bild6.jpg" /></li>
    8. <li><img src="/images/bild7.jpg" /></li>
    9. <li><img src="/images/bild8.jpg" /></li>
    10. </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 !!!!



    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    3 Mal editiert, zuletzt von andy67 ()

  • Super Andy, danke. Vielleicht kann ich es auch mal brauchen. ..
    Danke.

    Bernie


    " Was wir alleine nicht schaffen, das schaffen wir dann zusammen..."


    :thumbsup:

  • Das ist ein Script das man auf jeden Fall mal einsetzen kann, vor allem die Funktion mit :) Bildern und nicht nur "trockener" Text. Werde es bei Gelegenheit mal ausprobieren. Besten Dank

    Einmal editiert, zuletzt von zwoemti () aus folgendem Grund: vollständiges Zitat ist unnötig...

  • Habe ich probiert, ist leider vertikal.
    Ich brauche ein horizontales durchlaufendes Band mit Bildern als Endlosschleife.
    Und die einzelnen Bilder müssten sich verlinken lassen.
    vg