frog: Imagesslider

Beitrag lesen

Hallo Matthias!

Hab dein Posting übersehen und es erst jetzt gelesen!!!

Normalerweise empfehlen wir ein Live-Beispiel, weil man da beim Inspizieren schnell einen Syntax-Fehler findet, der die Frage beantwortet.

Ja, das kann ich machen! Ich mach das mal so wie ich mir das vorstell und aktualisere dann die Webseite, die ich dir verlinkt hab!

Was mich bei Dir erstaunt hat, ist die Tatsache, dass du trotz der div-Suppe gültiges HTML verwendet hast und dein JavaScript laut Console keine Fehler aufweist.

Na ja, du hast schon recht, es ist wahrlich eine Suppe? Ich werd´s aber mit der html5-Strukturierung ändern!

Da kannst du stolz drauf sein!

Ich schau regelmäßig in die Console ob sich da eine Fehlermeldung auftut! Meistens ist es dann auch so, aber ich behebe sie dann!!

Trotzdem sollten wir erst ohne JS-Code überlegen, wie man die Bilder in thumbnails als Übersicht/Vorschau zeigen kann und dann auf Nutzerwunsch präsentieren kann.

Aber der btn-Slider hat mich in JS Blut, Schweiss und Tränen gekostet und bin jetzt mit dem JS-Texthover sehr glücklich, das mir das gelungen ist. Meinst du etwa, dass ich hier was änder sollte?

ist schon ganz gut. Du hast Bilder in klein (class="thumbnail", kann man später durch .gallery img{} ersetzen).

Ja, so hab ich mir das vorgestellt!

Bei einem Klick öffnet sich kein Link (kann man mit preventDefault abschalten), sondern die Galerie.

Wozu brauch ich da prefentDefault, wenn ich die Thumbs nicht verlinke?

<a href = "mixedmedia.html#one">

die id als Sprunganker brauch ich ja dann auch nicht mehr?!

Welche Bilder zur Galerie gehören, ermittelt das JS. Es holt sich mit event.Target das geklickte Element und sucht dann die passende section und ermittelt die id (z.B. mix, damit nicht die anderen sections aktiviert werden).

Ich muss mir das event/target genauer ansehen, wei ich mir da jetzt überhaupt nix vorstellen kann.

Mit querySelectorAll('#mix img') erstellst du eine Liste aller Bilder, bzw. dann von deren URLs.

Die URL des geklickten Links (href-Attribut) wird in ein img als src-Attribut eingefügt und groß dargestellt.

Es werden Pfeile als Buttons eingeblendet/ erzeugt. (Kein links-Pfeil beim 1., kein weiter-Pfeil beim letzten.)

Es hört sich jetzt ein bisschen so an, als ob ich hier einen Img-array in einem creatElement-div ablege? Aber mein noch recht ungeübtes Auge kann sich auch täuschen. Das werds ich mal versuchen. Bis jetzt war´s immer so, dass ich fast alles was ich mir vorgestellt hab auch umsetzen konnte. Für einiges hab ich eben länger gebraucht!!

Wie @Gunnar Bittersmann in der ihm eigenen Art bereits erwähnt hatte, kannst du Buttons auch mit der Tab-Taste ansteuern. Das ist besser als die div-Elemente.

Ich fürchte das muss noch warten. Erst muss ich die beiden Slider miteinander verknüpfen. Aber @Gunnar Bittermann kann hier meinen Code gerne weiter kommentieren!!

Ich hätte schon Lust, dich da in den nächsten Tagen/Wochen zu begleiten.

Yes, yes, yes!! Das wäre aber echt Super!! Ich war ja von deinem letzten Post auch ein bisschen überracht, weil du als Programmierer auch so begeistert von Illus bist! Darf ich fragen, ob du auch zeichnest?

wünsche dir alles Gute frog

0 57

Imagesslider mit einem Sprunganker verlinken

frog
  • javascript
  1. 0
    JürgenB
    1. 0
      frog
      1. 0
        Matthias Scharwies
        1. 2
          frog
        2. 0
          frog
          1. 0
            Matthias Scharwies
            1. 0
              frog
          2. 0
            Gunnar Bittersmann
            • typografie
            1. 0
              Rolf B
              1. 0
                Gunnar Bittersmann
  2. 0

    Imagesslider mit einem Sprunganker verlinken/Webseite hochgeladen

    frog
    • javascript
    • programmiertechnik
    1. 0
      Matthias Scharwies
      1. 0
        frog
        1. 0

          HTML5 lebt!

          Matthias Scharwies
          1. 0
            frog
            1. 0
              Matthias Scharwies
              1. 0
                frog
                1. 0
                  Matthias Scharwies
                  1. 0
                    frog
                    • javascript
                    • programmiertechnik
                    • sonstiges
        2. -1

          Imagesslider

          Matthias Scharwies
          1. 0
            Gunnar Bittersmann
            • html
            • inclusive design
          2. 0
            frog
            1. 0
              Matthias Scharwies
              1. -3
                Gunnar Bittersmann
                1. 0
                  Gunnar Bittersmann
                  • meinung
                  • zu diesem forum
                  1. 3

                    Forums-Charta beachten

                    Matthias Scharwies
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        frog
                        • meinung
                        • menschelei
                        • zu diesem forum
                        1. 0
                          Gunnar Bittersmann
                  2. 3
                    Camping_RIDER
                    1. 0
                      Raketenheinz
                    2. 0
                      Tabellenkalk
                2. 0

                  Nicht ganz falsch - aber auch nicht ganz richtig

                  Raketenwilli
                  1. 1
                    Gunnar Bittersmann
                    • html
                    • ux
                    1. 0
                      Raketenwilli
                      1. 0
                        Gunnar Bittersmann
                        • html
                        1. 0

                          Wettangebot?

                          Raketenschlitzohr
                          1. 0

                            Die fehlerhafte Testseite

                            Raketenschlitzohr
                            1. 0
                              Rolf B
                              1. 0
                                Raketenschlitzohr
                            2. 1
                              JürgenB
                              1. 0
                                Raketenschlitzohr
                                1. 0

                                  Link zur fehlerhaften Testseite

                                  Raketenschlitzohr
                                  • browser
                                  • html
                                  1. 0

                                    Auflösung

                                    Raketenschlitzohr
                                    1. 2
                                      Tabellenkalk
                                      1. 2

                                        Zurück zum Kontext „Zugänglichkeit“

                                        Raketenheino
              2. 0
                frog
                1. 0
                  Matthias Scharwies
                  1. 0
                    frog
                    1. 0
                      Camping_RIDER
                      • menschelei
                      1. 0
                        frog
                        • meinung
                        • menschelei
                        1. 0
                          Matthias Scharwies
                          1. 0
                            Gunnar Bittersmann
                            • html
                            • meinung
                            1. 0
                              Matthias Scharwies
                              1. 0
                                Gunnar Bittersmann
                              2. 0
                                frog