• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder Slider (Laufband) mehrfach auf Website einbinden

S

schubste

Neues Mitglied
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 ;) 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 :)
 
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
<ul id="scroller"> 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
 
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: 
<li><img src="image1.jpg" width="290" height="200"></li>
jeweils mit einem href-Tag ergänzen, genau wie bei deinem alten Slider:
HTML: 
<li><a href="dein_linkziel.html"><img src="image1.jpg" width="290" height="200"></a></li>
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.
 
Zuletzt bearbeitet von einem Moderator:
Sempervivum schrieb:
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: 
<li><img src="image1.jpg" width="290" height="200"></li>
jeweils mit einem href-Tag ergänzen, genau wie bei deinem alten Slider:
HTML: 
<li><a href="dein_linkziel.html"><img src="image1.jpg" width="290" height="200"></a></li>
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.
Zum Vergrößern anklicken....
Juhu... Es funktioniert. vielen vielen Dank :) Eine Frage hätte ich noch, gibt es hier auch eine Geschwindigkeitseinstellung? Kann leider nichts finden.
 
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
 
Wenn Du IDs verwendest, musst Du jedem Scroller eine andere geben und jeden für sich initialisieren:
HTML: 
<ul id="scroller1">
...
</ul>
...
<ul id="scroller2">
...
</ul>
Code: 
(function($) {
$(function() { //on DOM ready
$("#scroller1").simplyScroll();
$("#scroller2").simplyScroll();
});
})(jQuery);

Es sollte aber auch mit einer Klasse funktionieren:
HTML: 
<ul class="scroller">
...
</ul>
...
<ul class="scroller">
...
</ul>
Code: 
(function($) {
$(function() { //on DOM ready
$(".scroller").simplyScroll();
});
})(jQuery);
 
Sempervivum schrieb:
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: 
<li><img src="image1.jpg" width="290" height="200"></li>
jeweils mit einem href-Tag ergänzen, genau wie bei deinem alten Slider:
HTML: 
<li><a href="dein_linkziel.html"><img src="image1.jpg" width="290" height="200"></a></li>
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.
Zum Vergrößern anklicken....
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 ;) Danke und Gruß
Stefan
 
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
 
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;
}
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.
 
Sempervivum schrieb:
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;
}
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.
Zum Vergrößern anklicken....
super Lösung, vielen Dank! :)
 
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 :( Ich glaube, bei dem folgenden passt wohl was nicht richtig:

<li><a href="images/contentb/bild1.jpg" data-lightbox="bild1" >bild #1</a><img src="images/contentb/bild1.jpg" width="225" height="150"></li>

Danke für Eure Hilfe
 
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 ;)

Besten Dank im Voraus
 
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.
 
Ich weiß zwar nicht, ob das der Grund ist, aber Du hast jQuery zweimal eingebunden. Solltest Du auf jeden Fall beheben.
 
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:
Code: 
<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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben