Ankündigung
Einklappen
Keine Ankündigung bisher.
Mit nem Anfänger Schritt für Schritt nen Slider bauen...
Einklappen
Neue Werbung 2019
Einklappen
X
-
Sorry, Denkfehler von mir. Hatte vergessen, dass die ID's ja in Schleifen liegen. Jetzt ist die Seite sauber. Dadurch habe ich aber ein anderes Problem.
HTML-Code:<div class="backDrop"></div> <div class="modal"> <ul> <li id="fu0010+a" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+a.jpg" class="modalImage" alt="foto"></li> <li id="fu0010+b" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+b.jpg" class="modalImage" alt="foto"></li> <li id="fu0010+c" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+c.jpg" class="modalImage" alt="foto"></li> <li id="fu0010+d" class="largeImage"><img src="../images/waren/fu0010/tn_fu0010+d.jpg" class="modalImage" alt="foto"></li> </ul> </div>
Kommentar
-
Wenn das in einer Schleife liegt und mehrfach wiederholt wird hast du immer noch dieselbe id mehrfach. Zudem könnte ich wetten, dass
HTML-Code:<div id="fu0010+b.jpg" class="test"> <a href="../images/waren/fu0010/fu0010+b.jpg" class="popup" data-item="fu0010+b.jpg"> <img src="../images/waren/fu0010/tn_fu0010+b.jpg" alt="Futterhaus" class="verk_foto"> </a> </div>
Du postest immer alles nur scheibchenweise, bastle ein jsfiddle mit einem Prototyp, dann können wir Dir weiterhelfen.
Kommentar
-
Nee, das habe ich schon raus
Das jsfiddle ist ne gute Idee: https://jsfiddle.net/qLb5u326/
Zitat von jonas3344 Beitrag anzeigenWenn das in einer Schleife liegt und mehrfach wiederholt wird hast du immer noch dieselbe id mehrfach. Zudem könnte ich wetten, dass
Kommentar
-
Fürs fiddle musst du natürlich den PHP-Code rausnehmen und 2-3 Beispielbilder reinkopieren.
Wie du durch verschiedene Elemente einer bestimmten Class durchgehst hab ich vorhin gepostet, da hilft google auch vortrefflich weiter. Ansonsten verstehe ich aber immer noch nicht weshalb du dort eine Liste brauchst.
find (http://api.jquery.com/find/) ist evtl. auch eine Variante.
Kommentar
-
Zitat von jonas3344 Beitrag anzeigenFürs fiddle musst du natürlich den PHP-Code rausnehmen und 2-3 Beispielbilder reinkopieren.
Zitat von jonas3344 Beitrag anzeigenWie du durch verschiedene Elemente einer bestimmten Class durchgehst hab ich vorhin gepostet, da hilft google auch vortrefflich weiter. Ansonsten verstehe ich aber immer noch nicht weshalb du dort eine Liste brauchst.
find (http://api.jquery.com/find/) ist evtl. auch eine Variante.
Kommentar
-
Ich habe Dein Edit gar nicht gelesen.
Zitat von jonas3344 Beitrag anzeigenDu hast immer noch Elemente mit derselben id.
Edit:
Ausserdem:
Weshalb hast du dort überhaupt die Liste? Die macht doch keinen Sinn?
Zitat von jonas3344 Beitrag anzeigenMit
HTML-Code:$('.irgendwas')
Zitat von jonas3344 Beitrag anzeigenUnd, bei folgendem Vergleich:
HTML-Code:if($('.largeImage').attr('id') == item)
Du scheinst immer noch Sachen zu versuchen, die du im Grundsatz eigentlich gar nicht verstanden hast, nicht?
In PHP würde eine entsprechende Abfrage aber wohl funktionieren...
Kommentar
-
rabab
Versuche doch Deine Probleme schrittweise zu lösen, denke auch daran, PHP und HTML nicht zu vermischen.
1.) Ausgabe der Artikeldaten, Ohne css ohne SchnickSchnack und ohne jQuery, auch ohne "select *"
Wenn die Ausgaben passen
2.) Bau den Slider anhand einer minimalistischen HTML ohne Artikeldaten einfach nur so, dass die Angelegenheit funktioniert.
Wenn Du das geschafft hast, kombiniere Beides und kümmere Dich erst am Schluss um die optische Gestaltung.
Kommentar
-
kaminbausatz
So habe ich das auch gemacht. Das heißt, nicht ganz. Die Seite mit der Ausgabe steht schon, aber ich habe auf deren Grundlage eine einfache HTML-Seige gebaut. Da da dann aber keine Schleife drin ist, hat es auch nicht viel gebacht. Das CSS jetzt raus zu nehmen würde alles, denke ich, nur verkomlizieren.
Den Slider habe ich dann komlett einzeln gebaut - oder besser angepasst, weil es ein fertiger war. Der funktioniert auf der einfachen Seite einwandfrei, doch passt er so wie er ist nicht in die Lightbox - allein schon, weil er eben eine Liste braucht.
Aber das Problem mit dem einblendenden, einzelnen Foto habe ich jetzt gelöst. https://jsfiddle.net/qLb5u326/14/.
Mir ist aber aufgefallen, dass im Inspector alle Bilderadressen in der BackDrop-Liste gleich sind (ist ja auch logisch, denke das bekomme ich noch hin), im Quelltext der Seite aber merkwürdiger Weise nicht.
Und dann habe ich immer noch das Problem mit ID und Class von BackDrop. Hier wird es jetzt völlig abstus. Ich habe die BackDrop-Box mit ID jetzt ganz nach oben gesetzt, dierekt unter den <body>-Tag. Es gibt sie also nur einmal. Denkste... Sowohl im Inspector als auch im Quelltext wird er nach jedem Bild angezeigt. Wie geht denn sowas?
[edit vor dem edit]
Okay, vergesst das mit der BackDrop-Box. Ich habe in einer Datei geschrieben und eine andere im Browser aufgerufen.
[edit]
Das select * in der Datenbankabfrage steht sogar in der PHP-Dokumentation. Warum, wenn man das nicht machen soll?
Kommentar
-
Ich habe mein jsfiddle aktualisiert: https://jsfiddle.net/qLb5u326/19/
Zwei Probleme, die mich fast wahnsinnig machen:
1.) Die Lightbox funktioniert jetzt soweit ganz gut. Nur wird das Bild viel schneller eingeblendet als der Hintergrund, obwohl beide die gleiche Zeit haben. Selbst wenn ich beim Bild die Zeit auf 5000 setze, wird es schneller angezeigt. Wo ist da der Fehler?
2.) mit CSS komme ich eigentlich recht gut klar. Dennoch verstehen ich einfach nicht, warum das Bild in der Lightbox am linken Rand klebt. Das heißt, etwa 10 Pixel ist es vom Rand entfernt und ich komme weder darauf, wohler die 10 Pixel kommen, noch warum ich das Bild einfach nicht zentrieren kann. Jemand eine Idee?
Kommentar
-
Zitat von rabab Beitrag anzeigen...
Jemand eine Idee?
Kommentar
-
Zitat von rabab Beitrag anzeigen
1.) Die Lightbox funktioniert jetzt soweit ganz gut. Nur wird das Bild viel schneller eingeblendet als der Hintergrund, obwohl beide die gleiche Zeit haben. Selbst wenn ich beim Bild die Zeit auf 5000 setze, wird es schneller angezeigt. Wo ist da der Fehler?
**Link entfernt, weil Seite nicht mehr erreichbar **Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
Erreichbar in mein Javascript-Forum und in Facebook-Chat
Kommentar
-
basti1012
nee. so auch nicht. Offenbar scheint es bei mir schon zu funktionieren, ist nur Browserabhängig. In einem Firefox-Profil läuft es wie es soll - Bild und HIntergrund werden beide langsam eingeblendet - in dem Profil, mit dem ich eigentlich arbeite, geht es nicht - Bild poppt auf und dann wird erst der Hintergrud eingeblendet ?!?
Trotzdem danke Basti, ist ein interessanter Effekt, muss ich mir morgen mal genauer angucken.
Kommentar
-
Ich hätte echt nicht gedacht, dass ich alleine so weit komme, aber es funktioniert fast: https://jsfiddle.net/rabab2k/h90cjdmL/10/
Allerdings gibt es ein kleines und ein riesen großes Problem. Das kleine, die Animation beim weiterschalten der Bilder funktioniert nicht und ich habe keine Ahung warum. Das große Problem: sowie man im Slider ein Bild weiter schaltet, springt die Seite im Hintergrund wieder ganz nach oben.
Hat wer nen paar Tips für mich?
Kommentar
Kommentar