Ankündigung

Einklappen
Keine Ankündigung bisher.

Mit nem Anfänger Schritt für Schritt nen Slider bauen...

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • #61
    Hast du den Auftrag von hausl ausgeführt?

    Zeig bitte immer den ganzen Code, nicht nur Ausschnitte.

    Kommentar


    • #62
      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>
      Das liegt in einer Schleife, wird also mehrfach wiederholt. Class="BackDrop" war ursprünglich eine ID, damit läuft es auch. Wenn ich die nun in eine Klasse umwandle, bekomme ich nur noch ein schwarzes Bild, vermutlich werden alle BackDrop-Classen übereinander gelegt. Mit einer ID geht es ohne Probleme. Was nun?

      Kommentar


      • #63
        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>
        immer noch so drin ist. Hab ich Recht?

        Du postest immer alles nur scheibchenweise, bastle ein jsfiddle mit einem Prototyp, dann können wir Dir weiterhelfen.

        Kommentar


        • #64
          Nee, das habe ich schon raus
          Das jsfiddle ist ne gute Idee: https://jsfiddle.net/qLb5u326/

          Zitat von jonas3344 Beitrag anzeigen
          Wenn das in einer Schleife liegt und mehrfach wiederholt wird hast du immer noch dieselbe id mehrfach. Zudem könnte ich wetten, dass
          Genau das ist ja jetzt das Problem.

          Kommentar


          • #65
            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


            • #66
              Zitat von jonas3344 Beitrag anzeigen
              Fürs fiddle musst du natürlich den PHP-Code rausnehmen und 2-3 Beispielbilder reinkopieren.
              Sorry, ich stelle mich echt blöder an, als ich eigentlich bin. Hab ich jetzt gemacht.

              Zitat von jonas3344 Beitrag anzeigen
              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.
              Die Liste brauche ich für den Slider. Ich werde mir mal angucken, was Du geschrieben hast.

              Kommentar


              • #67
                Ich habe Dein Edit gar nicht gelesen.

                Zitat von jonas3344 Beitrag anzeigen
                Du hast immer noch Elemente mit derselben id.

                Edit:
                Ausserdem:
                Weshalb hast du dort überhaupt die Liste? Die macht doch keinen Sinn?
                Wie gesagt, die brauche ich für den Slider.
                Zitat von jonas3344 Beitrag anzeigen
                Mit
                HTML-Code:
                $('.irgendwas')
                greifst du nur auf das erste Element mit der bestimmten Klasse zu.
                Genau das will ich ja auch - oder reden wir aneinander vorbei?
                Zitat von jonas3344 Beitrag anzeigen
                Und, bei folgendem Vergleich:
                HTML-Code:
                 if($('.largeImage').attr('id') == item)
                vergleichst du 'id' mit '#id', was logischerweise false ergibt.
                Du scheinst immer noch Sachen zu versuchen, die du im Grundsatz eigentlich gar nicht verstanden hast, nicht?
                Es ist richtig, dass ich den Grundsatz nicht verstanden habe. Ich kapier sowas aber auch blöderweise immer erst, wenn ich weiß, wie es funktioniert.
                In PHP würde eine entsprechende Abfrage aber wohl funktionieren...

                Kommentar


                • #68
                  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


                  • #69
                    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


                    • #70
                      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


                      • #71
                        Zitat von rabab Beitrag anzeigen
                        ...
                        Jemand eine Idee?
                        F12 im Browser und dann die Stelle mit den Browsertools markieren und du siehst das CSS, das dafür verantwortlich ist.

                        Kommentar


                        • #72
                          Hab ich versucht, hat mich nicht weiter gebracht.


                          EDIT
                          Das Zentrieren habe ich hinbekommen, letztlich doch - durch Zufall - mit den Browsertools. Danke
                          Jetzt bleibt noch das Problem mit dem zu schnellen Einblenden des Bildes.

                          Kommentar


                          • #73
                            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?
                            Wie soll das den aussehen ? So ungefähr
                            **Link entfernt, weil Seite nicht mehr erreichbar **
                            Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
                            Erreichbar in mein Javascript-Forum und in Facebook-Chat

                            Kommentar


                            • #74
                              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


                              • #75
                                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

                                Lädt...
                                X