Imagesslider

[Matthias Scharwies]

Servus!

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!

Das Du dich auf BPlaced angemeldet und uns Dein Beispiel gezeigt hast, fand ich gut!

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?

Das musst du entscheiden!

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?!

Das ist es, was ich im Forum so schwierig finde. Ich habe Ideen und versuche sie mit deinem Grundgerüst zu kombinieren und da passiert mir so ein Lapsus.

Ich hab's oben ausgebessert.

Du benötigst ja von jeder Grafik zwei Varianten:

• ein thumbnail
• die Großansicht (Du hattest in der Slideshow bereits mit picture experimentiert. Mir ist das zu kompliziert. Dein Bild illumixed106-1.5x.jpg hat 357 KB - für mein WLAN im Wohnzimmer fast zu viel)

Ziel ist es, die URLs beider Varianten im HTML (dort wo der Inhalt notiert wird) zu notieren und die dann vom JS auslesen zu lassen. Falls das JS nicht funktioniert, kann man per Link das Grioißbild anzeigen lassen.

• HTML/Tutorials/Trennung_von_Inhalt,_Präsentation_und_Verhalten

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.

Du hast schon irgendwie recht. Die Liste ist aber eine Live Node List

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!!

Perfekt. Ich habe ein Bildwechsler-Tutorial, das seit zwei Jahren rumliegt. Vielleicht kann ich das parallel fertigstellen.

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?

Fragen ja, aber nein - leider nicht. Ich kann mich an den einfachsten SVGs begeistern und probiere da viel aus. Zeichnen scheitert an meinen motorischen Mängeln. Deine Bilder waren aber eindrucksvoll.

Herzliche Grüße

Matthias Scharwies