Ich weiß nicht, wie ich das mit jQuery realisieren soll

arya · 06.09.2012

Guten abend,
ich arbeite derzeit en einem neuem Design meiner Firmenseite und habe ein Problem oder vielmehr eine Frage.

Mittig/unten auf der Seite möchte ich es dem Kunden ermöglichen Bilder mittels Klicken auf 3 Links (1,2,3) oberhalb der Bilder manuell durchklicken zu können.

Leider weiß ich nicht wie ich das mit jQuery realisieren kann. Die Bilder sollen dann mit Effekten (Transition, Überblendeffekt, o.ä.) geladen werden.

Hier habe ich einen Link zum fertigen Layout:
Es geht um die rot eingekreisten Links und die darunter angebrachten Bilder.

Ich hoffe ich habe mich einigermßen verständlich ausgedrückt und ihr könnt mir helfen.

Danke

Duddle · 06.09.2012

AW: Ich weiß nicht, wie ich das mit jQuery realisieren soll

Sowas nennt sich "Slider" und für jQuery gibt es genau für diesen Zweck. Die meisten davon sind recht einsteigerfreundlich und sollten mithilfe der Dokumentation & Beispielen leicht an die eigene Website anpassbar sein.

Duddle

darkdevel · 07.09.2012

AW: Ich weiß nicht, wie ich das mit jQuery realisieren soll

Schau mal hier vielleicht ist da der passende Slider für dich dabei

Rata · 07.09.2012

AW: Ich weiß nicht, wie ich das mit jQuery realisieren soll

darkdevel schrieb:
Schau mal hier vielleicht ist da der passende Slider für dich dabei

Boaaah! :lol: Was für ein Link!

Herzlichen Dank von mir, darkdevel.

Lieber Gruß
Rata

8)

arya · 14.09.2012

AW: Ich weiß nicht, wie ich das mit jQuery realisieren soll

Danke für eure Antworten.
Ich habe mich für diesen Slider entschieden:
und versucht, diesen in meine Website einzubauen.
Leider funktioniert es nicht. Ich habe den Code auf der Seite kopiert und in meine HTML - Datei an der Position, an der der Slider später erscheinen soll eingefügt. Leider klappt es nicht und ich weiß nicht warum.

Hier ist mal ein Link zur Testseite:
(der Slider befindet sich unten-das orangene Feld)

Was mache ich falsch?
Vielleicht kann mir jemand bei diesem Problem helfen. Ich lerne derzeit noch HTML/CSS und kenne mich mit jQuery kaum aus. Es wäre nett, wenn mich jemand in die richtige Richtung führen könnte.

Danke im vorraus.

patrick_l · 14.09.2012

AW: Ich weiß nicht, wie ich das mit jQuery realisieren soll

Rata schrieb:
Boaaah! :lol: Was für ein Link!
Herzlichen Dank von mir, darkdevel.

Wow! Auch von mir ein dickes Dankeschön

Kannte bis jetzt eigentlich nur die gängigsten Slider. Echt klasse wenn man dann mal so einen kleinen Überblick hat

Merci

arya schrieb:
Vielleicht kann mir jemand bei diesem Problem helfen. Ich lerne derzeit noch HTML/CSS und kenne mich mit jQuery kaum aus. Es wäre nett, wenn mich jemand in die richtige Richtung führen könnte.

Ich würde das Script vom Slider oben mit in den Kopfteil (head) packen oder noch besser nach ganz unten. Aber das nur so nebenbei.

Das einzige was ich jetzt auf die schnelle sehen, das du keine Angaben in deinem CSS für den Slider gemacht hast.

Grüße Patrick

Duddle · 14.09.2012

AW: Ich weiß nicht, wie ich das mit jQuery realisieren soll

hat nur jquery.blinds-0.9.js, die unkomprimierte Version des Scriptes. Im Quelltext bindest du aber js/jquery.blinds-0.9.min.js ein, die dann offensichtlich nicht gefunden wird.

Duddle

arya · 15.09.2012

AW: Ich weiß nicht, wie ich das mit jQuery realisieren soll

Danke nochmal für die Hilfe.
Leider funktioniert es immer noch nicht. Ich habe die Verlinkung zur JS-Datei geändert, das Javascript im Header ausgeführt und in der CSS-Datei Angaben für die Box des Sliders gemacht, aber es tut sich immer noch nichts.

Der Slider an sich funktioniert nicht und die DIV-Box des Sliders sollte eigentlich 20px Abstand nach unten zu den Links haben.

Ich verzweifel hier noch. Leider ist das ganze sehr schlecht dokumentiert und in den Beispieldateien die man auf herunterladen kann, fehlt eine CSS Datei.

Ich habe die geänderten Dateien nochmals auf hochgeladen, falls ihr mir helfen und euch das ganze mal ansehen möchtet.

Ich danke wieder einmal im Vorraus.

hub · 15.09.2012

AW: Ich weiß nicht, wie ich das mit jQuery realisieren soll

Hast du das Problem schon gelöst? In deinem Quelltext steht <div id="slideshow"> und im Script versuchst du es mit $('.slideshow') zu initialisieren. Versuche es mal mit <div class="slideshow"> oder wenn es die ID sein soll, mit $('#slideshow') .... Die verwendete CSS findes du übrigens im Archiv "working example".

arya · 12.10.2012

AW: Ich weiß nicht, wie ich das mit jQuery realisieren soll

Hallo,
sorry, dass ich mich solange nicht gemeldet habe. Es hat alles wunderbar geklappt, danke für den entscheidenden Tipp, hub.

Doch jetzt komt das große ABER: ich habe hier bei mir das ganze lokal mit FF, Opera, IE9 getestet und es funktionierte alles einwandfrei.

Nun berichtet mir ein Freund, der die Seite mit IE8 getestet hat, dass der Slider fehlerhast angezeigt wird. Gibt es da irgendeinen Kniff, das Script auch auf dem IE8 lauffähig zu bekommen.

Da ich IE9 installiert habe, wollte ich auch fragen, ob ich irgendwie parallel dazu auch ältere Versionen installieren und laufen lassen kann.

Hier noch einmal der Link zur Testseite:

hub · 12.10.2012

AW: Ich weiß nicht, wie ich das mit jQuery realisieren soll

Moin moin,
MS hat nen Browser-Bundle für Entwickler (hab den Link gerade nicht da). Damit kannst du fast alles abdecken. Ältere IE's und jQuery haben das Problem, mit undefinierten Größen umzugehen. Das Ergebnis ist, das jQuery versucht, mit 'undefined' zu rechnen und packt das nicht. Da hilft dir nur der Debugger zum Finden der Stelle und das entsprechende Element per CSS vorzubelegen oder es mit Javascript in deiner entsprechenden Funktion zu beheben.

Gruß Ulli

hub · 12.10.2012

AW: Ich weiß nicht, wie ich das mit jQuery realisieren soll

Ich bin es nochmal,
ich habe mir den Online-Quellcode mal angeschaut. Ich kenne zwar das Plugin nicht, aber mir ist aufgefallen, das du die Div-Elemente ansprichst, obwohl sie zu dem Zeitpunkt zumindest im IE noch nicht existieren. Versuche mal zu warten, bis der DOM vollständig ist, entweder so:

Code:

[SIZE=2]$(document).ready([/SIZE]
 
[LEFT][B][SIZE=2][COLOR=#7f0055][SIZE=2][COLOR=#7f0055]function[/COLOR][/SIZE][/COLOR][/SIZE][/B][SIZE=2]() {[/SIZE][/LEFT]
 
[LEFT][SIZE=2]$('.slideshow').blinds();[/SIZE]
[SIZE=2]$('.slideshow2').blinds();[/SIZE]
[SIZE=2]$('.slideshow3').blinds();[/SIZE][/LEFT]
 
[LEFT][SIZE=2]});[/SIZE][/LEFT]

oder du fügst die Initialisierung unmittelbar vor

Code:

</body>

ein.

Möglicherweise ist dein Problem damit schon erschlagen.
Sorry, ich kann s gerade nicht testen (oder das hat bis Sonntagabend zeit )

...

Gruß Ulli