Bilder »nachrutschen lassen« – Bildergalerie

  • wie meinst du das denn ?

    Wenn ein Bild kleiner ist als die anderen bleiben die reihen längst ja so wie sie sind.

    Sind alle Bilder einer Reihe kleiner sollten die Oberen Bilder weiter runter ( rutschen ).


    Du willst das wenn ein Bild kleiner ist , die anderen von oben nach rutschen ? Wie bei Tetris ? Bis Bild auf Bild liegt ?


    Oder meinst du das die kleineren Bilder dann unten angeordnet sind und nicht oben ?

    https://www.w3schools.com/code…asp?filename=G4C87LBUFFA1

  • willst du nur die Bilder benutzen oder auch die beschreibung zu den Bildern ?

    Soll der Platz immer voll ausgenutzt werden wenn die Bilder unterschiedlich gross sind ?


    Vieleicht wäre so ein Script was für dich das du da mir einbauen könntest

    https://www.jqueryscript.net/d…onry-photo-gallery-imgal/


    Oder das , das gefällt mir besser

    https://www.jqueryscript.net/d…with-jQuery-Nice-Gallery/

  • Danke. Beschreibungen und eine Filterfunktion wären wichtig.
    Hast du eine Idee, wie sich das machen lässt?

    Klar. Aus 2 mach 1.

    https://basti1012.bplaced.net/…rdner=html-seminar&id=368


    Für Einzelheiten und Genauigkeiten darfst du dir dann Zeit nehmen. Wunder dich nicht das die Bilder mit der Button Aufschrift nicht passt, ich wahr zu faul mir die Bilder anzukucken was da drauf ist:)

  • Danke. Leider löst das mein Problem nicht :(

    Es geht (noch immer) um das hier:
    https://codepen.io/nicerboy/pen/JqvMvg

    Die Bildergalerie sollte grundsätzlich genau so sein. Allerdings sollten verschieden große Bilder – wie beschrieben – nachrutschen.

    Mit Masonry wüsste ich nicht, wie es möglich ist, nur ein Bild pro Zeile zu haben, wenn man mit dem Schiebeteil den Bildbereich kleiner zieht. Bei allen Beispielen wird dafür »@media ...« verwendet, was aber in diesem Fall nichts bringt, da ja nicht das Browserfenster verändert wird, sondern nur der Bereich innerhalb des Browserfensters.

    Hättest du da noch eine andere Idee?

  • Das Hauptproblem dir zu helfen sind deine vagen Informationen.


    Wir kennen weder die realen Bilder noch die realen Texte.


    Wir wissen nicht wie groß die Bilder wirklich sind. HTML und CSS sind keine Grafikprogramme. Was du willst ist so überhaupt nicht vorgesehen und wahrscheinlich auch überhaupt nicht erforderlich.


    Zum guten Stil gehört es aber in jedem Fall die Bilder zunächst zu bearbeiten, also auch in ihrer Größe anzupassen. Hast du das überhaupt gemacht?


    Wir wissen auch nicht wie lang die Texte sind. Ein Wort? Ein kurzer Satz? Ein Absatz? Mehrere Absätze?


    Du willst eine konkrete Lösung ohne uns die Grundlagen zu zeigen. Das wird nicht funktionieren. basti hat dir einen Weg gezeigt, mit dem du wohl nicht zurechtkommst. Wir wissen aber nicht konkret was dich daran stört.


    Also zeige bitte die konkreten Bilder und die konkreten Texte dazu.

  • Hallo MrMurphy,

    ich denke, dass das Problem klar ist, wenn man das hier betrachtet:
    http://codepen.io/nicerboy/pen/QRrZQo

    (Mit den »reellen« Texten und Bildern hat das an sich gar nichts zu tun. Die Bilder sollen keinesfalls zugeschnitten werden und sich untereinander anordnen.)

    Im Prinzip soll es genau so sein. Ich sitze gerade vor einem 15-Zoll-Monitor und bei mir entsteht zwischen dfkjaslf.jpg und saada.jpg eine große Lücke. Das soll so nicht sein.
    Es wäre natürlich möglich, das Masonry Skript zu verwenden, dann würden die Bilder nachrutschen, allerdings, wenn man mit dem Site-Splitter den rechten Bereich kleiner zieht, wüsste ich keine Möglichkeit, nur ein Bild pro Zeile stehen zu lassen.


  • (Mit den »reellen« Texten und Bildern hat das an sich gar nichts zu tun. Die Bilder sollen keinesfalls zugeschnitten werden und sich untereinander anordnen.

    Normalerweise macht man sowas mit @media queries.

    Das auf ein Container anwenden geht, glaube ich nicht . Zumindest fällt mir gerade nix ein.

    Aber aus dein Beispiel sehe ich das du irgendwas kleiner oder größer schieben willst und ab einer Größe sollen die Bilder untereinander sein?

    Dann Bau doch etwas Javascript mit ein und dann geht das auch.

    Ist jetzt nicht das beste Beispiel und nicht ausgereift auf alle Größen , aber du siehst es würde auch gehen.

    Mit etwas fummeln und überlegen kriegst du das dann auch noch besser hin.

    Trotzdem wäre alle angaben die MrMurphy schon sagte zum großen Vorteil damit man es besser machen könnte.

    https://basti1012.bplaced.net/…rdner=html-seminar&id=368


    Du musst die obere linke box größer machen ( resize )

  • Danke basti1012
    Wie lassen ich da Breakpoints einbauen?



    Zu den Angaben, die euch gefehlt haben:

    Das ist das (fast) fertige Template:
    https://codepen.io/nicerboy/pen/QRrZQo

    Das einzige Problem ist, wie beschrieben, dass die Bilder vertikal nicht nachrutschen. Ein Breakpoint bei <500px ist hier enthalten.

    In dieser Version rutschen zwar die Bilder nach, dafür macht das Grid an sich Lücken:
    https://codepen.io/nicerboy/pen/MdGZEG

    Eine Mischung aus den Beiden wäre perfekt. :)

  • in dein ersten Beispiel hast du ja 4 Bilder drinne, wo auf der einen Seite die große Lücke ist.

    Du willst ja das die Bilder nachrücken ( runter rutschen ), aber dann hast du die Lücke ja über den Bildern. Ist das dann so gewollt , oder rutschen dann noch mehr Bilder nach wie in meinen Beispiel ?


    Dein 2 Codepen verstehe ich nicht was du meinst , das sind einfach Bilder die übereinander stehen mit einen schlechten reponsiven Effekt. Falls das gewollt ist dann ok , trotzdem nicht mein geschmack.

  • Da ich nicht die hellste Birne hier bin muß ich es jetzt aufgeben. Ich schecke es einfach nicht mehr nicht.

    Die ganze Zeit wird von nachrücken ( rutschen ) geredet. Das heißt für mich das nächstes Bild von oben kommt.Wen dann fällt es bis zum Ende runter , oder es bleibt am Ausenbereich des Containers hängen.

    Wenn er am Container Rand hängen bleibt können diese Abstände kommen.

    Dann gibt es bei Flexbox noch flex-start und flex-end, was das anordnern der Bilder oben oder unten veranlassen würde.


    Da meine Beispiele nicht passen und deine Beispiele mir gerade nicht mehr auf der sprünge helfen (die birne wird dunkler)

    hoffe ich das eine hellere Birne dir da weiter helfen kann.

    Nur ich schecke jetzt gar nix mehr wie was wo hin rutschen soll und so weiter.


    Tut mir leid Sorry !

  • Hey,

    kein Problem! Ich bin dir trotzdem super dankbar für deine Mühe und deine schnellen Antworten!

    Außerdem bist du schon eine »helle Birne«, du hast viel mehr Ahnung als ich. Ich studiere seit drei Jahren und hab oft das Gefühl, gar nichts zu können. :)

    Viele Grüße

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!