News ticker mit Bildern (bx-Slider Vertikal)

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

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

      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.

      JavaScript-Quellcode

      1. <script type="text/javascript">
      2. $('.bxslider').bxSlider({
      3. mode: "vertical",
      4. minSlides: 5,
      5. maxSlides: 5,
      6. slideWidth: 170,
      7. slideMargin: 10,
      8. ticker: true,
      9. tickerHover: true,
      10. useCSS: false,
      11. speed: 10000,
      12. autoDirection:"prev"
      13. });
      14. </script>
      Alles anzeigen


      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 !

      Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von andy67 ()

    • 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

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von zwoemti () aus folgendem Grund: vollständiges Zitat ist unnötig...