Bilder Slider (Laufband) mehrfach auf Website einbinden

html.de-Forum JavaScript
1

Hallo,
Ich habe auf meiner Website einen Bilderslider (Laufband) eingebunden. Hier war ich sehr froh, dass ich überhaupt eine html Vorlage gefunden habe und diese auch noch in meine Website einbinden konnte :wink: Nun meine Frage:
Die Inhalt der Testwebsite besteht aus dem #div contentA bis #div contentE. Im #div contentC befindet sich der Bilderslider. Den selben Bilderslider hätte ich jetzt gerne auch im #div contentE. Daher habe ich versucht, den gesamten Code auf dem #div contentC auch bei contentE hinein zu kopieren. Danach habe ich einfach andere Bilder ausgewählt. Leider war dieser Vorgang nicht des Rätsels Lösung o_O Wie kann ich nun diesen Bilderslider mehrfach und vor allem mit verschiedenen Bildern richtig einbinden? Hier gehts zur Testwebsite

Bin für jede Hilfe sehr dankbar :slight_smile:

2

Dieser Slider ist sehr veraltet und lässt sich nicht, ohne ihn praktisch neu zu schreiben, mehrfach anwenden. Es gibt jedoch aktuelle, auf die Du umstellen kannst:

http://bxslider.com/
In den Beispielen findest Du einen Ticker-Modus.

http://logicbox.net/jquery/simplyscroll/

Viel Erfolg und viele Grüße - Ulrich

3

Ich würde noch den Anythingslider empfehlen :slight_smile:

Moderation: Verschoben von HTML zu JavaScript.

4

Guten Morgen,
Erst einmal vielen Dank für die Antworten. Schade, dass ich den bereits eingebauten Slider nicht verwenden kann. Er passt perfekt, da ich eine Art Bilderlaufband mit Linkfunktion bei jedem einzelnen Bild benötige. Ich habe mir mal das hier http://logicbox.net/jquery/simplyscroll/horizontal.html (Vorschlag von Ulrich) angesehen. Kann man das um eine Linkfunktion pro Bild erweitern? Außerdem habe ich irgendwie Probleme beim Einbau des Codes. Vielleicht könnt Ihr mir hierbei noch kurz helfen. Wo genau und wie muss ich diese Codeschnipsel den einbinden?
in meine Html Datei habe ich den html Code eingebunden. Wobei ich nicht weiß, ob dies richtig war. Muss dieses

    unter mein #div contentC?? Wo muss der Javacode hin? Leider bin ich in diesem Thema noch nicht wirklich drin o_O

    vielen Dank und Grüße
    Stefan

5

Das werden wir schon hinbekommen, ist nicht schwer.
AFAIK kann dieser Slider beliebigen HTML-Kontent sliden, d. h. Du könntest im HTML dieses:
[html]

    • [/html]
    jeweils mit einem href-Tag ergänzen, genau wie bei deinem alten Slider:
    [html]
    • [/html]
    Das Javascript muss Du im Head deines HTML-Dokumentes einfügen. Und das HTML dort, wo der Slider angezeigt werden soll. Und nicht vergessen, die JS- und CSS-Datei herunter- und auf deinen Webspace hochzuladen.

    6

    Juhu… Es funktioniert. vielen vielen Dank :slight_smile: Eine Frage hätte ich noch, gibt es hier auch eine Geschwindigkeitseinstellung? Kann leider nichts finden.

    7

    Wie Du die Geschwindikeit einstellst, ist hier beschrieben:
    http://logicbox.net/jquery/simplyscroll/#config
    Schneller: speed erhöhen (nur ganze Zahlen)
    Langsamer: frameRate erniedrigen
    Bei der Initialisierung so angeben:

    $("#scroller").simplyScroll({speed: 2});
    8

    vielen Dank für Deine Hilfe. Du sagtest ja, dass ich diesen Slider dann mehrfach einbinden kann. Das habe ich jetzt mal ausprobiert und den Slider nochmal in mein #div contentE eingefügt. Leider scheint da irgend etwas nicht zu funktionieren. Ich sehe nur das erste Bild und das zweite befindet sich wohl darunter und bewegen tut sich auch nichts. Wäre toll wenn wir das noch hinbekommen. Habe es zum anschauen bereits hochgeladen:) Besten Dank und Gruß Stefan

    9

    Wenn Du IDs verwendest, musst Du jedem Scroller eine andere geben und jeden für sich initialisieren:
    [html]


      …

    ...
      ...
    [/html] [code] (function($) { $(function() { //on DOM ready $("#scroller1").simplyScroll(); $("#scroller2").simplyScroll(); }); })(jQuery); [/code]

    Es sollte aber auch mit einer Klasse funktionieren:
    [html]


      …

    ...
      ...
    [/html] [code] (function($) { $(function() { //on DOM ready $(".scroller").simplyScroll(); }); })(jQuery); [/code]
    10

    So… jetzt hab ich auch mal diesen Vorschlag ausprobiert. Es funktioniert auf jeden Fall, wenn man dem Bild einen Link zuweist. Allerdings haben auch alle anderen Bilder ohne Linkzuweisung plötzlich eine Umleitung auf den letzten vergebenen Link. :confused: Der Slider2 soll allerdings keine Linkzuweisung bekommen. Wenn wir das noch hinbekommen, bin ich voller neuem Wissen und sehr glücklich heute :wink: Danke und Gruß
    Stefan

    11

    Du hast bei deinen a-href-Tags das schließende vergessen:

  • [b][/b]
    • 12

    Oh man, da hätte ich drauf kommen müssen:rolleyes: vielen Dank.
    Das gehört zwar jetzt irgendwie nicht hierher, aber ein Problem habe ich noch. Mir ist aufgefallen, wenn ich das Browserfenster seitlich zusammenschiebe, dann verrutscht mein Inhalt :confused:. So z.B. im ContentA, die ersten beiden weißen Kästchen werden beim zusammenschieben verkleinert aber das dritte weiße Kästchen wird nach unten verschoben. Wie kann ich das noch beheben? Danke und viele Grüße Stefan

    13

    Es liegt daran, dass zwei deiner Container ein Margin haben. Dies hast Du bei den %-Angaben der Breiten berücksichtigt. Wenn sich der umgebende Container verkleinert, verschiebt sich diese Berechnung jedoch und es ist zu wenig Platz für die Margins.
    Man könnte es so lösen: Vor ein paar Tagen habe ich gelernt, dass man mit CSS auch rechnen kann. Du könntest auf diese Weise die Breiten genau berechnen:
    [html]#contentA1 {width:calc(54% - 10px);
    height:200px;
    text-align: left;
    float:left;
    background-color:#fff;
    margin-right: 10px;
    }
    #contentA2 {width:calc(23% - 10px);
    height:200px;
    text-align: left;
    float: left;
    background-color:#fff;
    margin-right: 10px;
    }
    #contentA3 {width: 23%;
    height:200px;
    text-align: left;
    float:left;
    background-color:#fff;
    }[/html]
    So getestet und funktioniert.
    Edit: Sehe gerade, dass die beiden kleineren Container nicht mehr gleich breit sind. Das kannst Du lösen, indem Du das Margin im Zwischenraum auf beide verteilst.

    14

    super Lösung, vielen Dank! :slight_smile:

    15

    Hallöchen, Das mit dem Laufband hat ja nun prima geklappt. Ich stehe nun allerdings vor der nächsten Hürde. Ich möchte die kleine Bilder nicht mit einem Link versehen, sondern mit Lightbox öffnen. Habe es im Beispiel bei Bild 1 versucht. Das Ergebnis könnt Ihr auf www.feststelltaste.lima-city.de/stefan1 begutachten. Es funktioniert zwar, aber nur wenn ich oben über das verrutschte Bild klicke :frowning: Ich glaube, bei dem folgenden passt wohl was nicht richtig:

  • bild #1

    • Danke für Eure Hilfe

    16

    In den Anker-Tag muss statt dem Text „bild #1“ das Image-Element.

    <li><a href=""><img src=""></a></li>
    17

    vielen vielen Dank. Endlich hat der Code es die richtige Reihenfolge :). Eine Frage hätte ich noch. Warum wird mir beim Aufrufen des Bildes dann immer „Image 1 of 2“ unter dem Bild angezeigt? Es gibt ja nur das eine Bild :oops:. Das ist auch nur bis zum 4. Bild so. Bei dem 5. Bild steht das beim Aufrufen nicht mehr da. :confused:

    Währe der Wahnsinn, wenn es dafür auch noch eine Lösung gibt :wink:

    Besten Dank im Voraus

    18

    Das dürfte daran liegen, dass im Attribut data-lightbox die Werte bild1, bild2, bild3 und bild4 insgesamt jeweils 2 Mal in deinem Slider vorkommen. Wenn Du das zu eindeutigen Werten änderst, erzeugt die Lightbox hiervon auch keine Gruppierung.

    19

    Ich weiß zwar nicht, ob das der Grund ist, aber Du hast jQuery zweimal eingebunden. Solltest Du auf jeden Fall beheben.

    20

    So, ich habe es mir mal angesehen. Es ist so, dass das Simplyscroll-Script die Listenelemente teilweise verdoppelt, wodurch der Effekt zu Stande kommt. Lösung möglich, indem man die data-lightbox-Attribute nach der Initialisierung des Sliders neu durchnummeriert:

    <script type="text/javascript"> (function ($) { $(function () { //on DOM ready $("#scroller").simplyScroll(); $("#scroller2").simplyScroll(); $("a[data-lightbox*='bild']").each(function (idx) { $(this).attr("data-lightbox", "bild" + idx); }); }); })(jQuery); </script>