Beiträge von Sempervivum

Ich bin noch nicht dahinter gekommen, warum das gutter bei dir nicht greift. Bei mir funktioniert es einwandfrei. Ich untersuche das weiter ...

PS: Wie ich sehe, ist in dem was online ist, kein data-masonry drin. Daran kann es also nicht liegen.

Möglicher Weise kommen sich hier noch die Definitionen in data-masonry und im Javascript ins Gehege.

Die Console zeigt uns, wo der Fehler liegt:

Zitat

Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '50%' is not a valid selector.

Der Parameter columnWidth muss entweder numerisch oder ein Selektor sein, i. allg. der für ein Item. Daran nimmt dann das Skript sozusagen Maß:

    $grid = $('.grid').masonry({
        columnWidth: '.grid-item',
        itemSelector: '.grid-item',
        gutter:50
    });
    $grid.imagesLoaded().progress(function () {
        $grid.masonry('layout');
    });

Zitat

Mit deinen Quelltextschnipseln können wird das Problem nicht nachbauen.

Ich schon

Klicke ich auf das Eingabefeld erscheint der blaue Rahmen und der Filechooser popt auf. Breche ich diesen ab, verschwindet er wieder und der blaue Rahmen bleibt solange das Element den Focus behält. Getestet mit Opera, ich kann nicht garantieren, dass sich andere Browser genau so verhalten.

Zitat

Da fällt mir grad noch was auf. Online, nicht lokal, wenn ich die Seite aktualisier, fallen die Bilder immer noch gestapelt aufeinander. Rufe ich die Seite komplett neu auf, ist das Raster dargestellt.

Ja, das ist mir auch schon aufgefallen. Schiebt man dann den Rand des Browserfensters werden die Elemente richtig angeordnet. Es liegt daran, dass die Abmessungen der Bilder noch nicht verfügbar sind, wenn sie nicht im Cache sind. Um das zu beheben gibt es dieses imagesloaded:

https://masonry.desandro.com/layout.html#imagesloaded

Eingebunden hast Du es ja schon, Du brauchst nur noch das Javascript entspr. der Anleitung zu erweitern:

    <script>
        $grid = $('.grid').masonry({
            columnWidth: '50%',
            itemSelector: '.grid-item',
            gutter:50
        });
        $grid.imagesLoaded().progress(function () {
            $grid.masonry('layout');
        });
    </script>

Zitat

Nehm ich da das Attribut jetzt komplett raus oder lass ich es nur leer? Bei mir geht's keine Variante der beiden.

Komplett heraus nehmen, Du schreibst ja, dass Du die Konf. eh über JS machen willst.

Besser nicht gleichzeitig die Konfiguration im HTML mit data-masonry und mit Javascript verwenden. Bei mir hat das zu einem zerlegten Layout geführt.

Und das Javascript

    <script>
        $('.grid').masonry({
            columnWidth: 200,
            itemSelector: '.grid-item',
            gutter: 10
        });
    </script>

an das Ende des body stellen, sonst sind die Elemente noch nicht vorhanden und das Anordnen beim Laden der Seite funktioniert nicht.

Setze ich beides um, ich habe mich für die Konf. mit Javascript entschieden, funktioniert es einwandfrei, einschl. gutter.

Dieser blaue Rahmen zeigt an, dass das Element den Focus hat. Wie Du ihn unterdrücken kannst, kannst Du hier nachlesen:

https://stackoverflow.com/questions/1457…ut-text-element

Man muss nur erst Mal das richtige Element heraus finden:

        .custom-file-label[data-browse]::after {
            outline: none !important;
        }

Mit diesen aria-Dingen habe ich mich noch nicht beschäftigt, aber es sollte kein Problem sein, das mit setAttribute zu setzen:

        const url = document.location.href;
        document.querySelectorAll('.navigation .menu-list li a').forEach(item => {
            if (url.includes(item.href)) {
                item.classList.add('active');
                item.setAttribute('aria-current', 'page');
            }
        });

Zitat

Ihr werdet jetzt lachen, aber ich dachte, ich könnte für die Galerie die Bilder in DIVs geben, mit flex versehen und dann wird alles schön angeordnet, auch responsive. Das geht ja doch normalerweise auch?

Selbstverständlich geht das auch, entweder mit Flex oder mit Grid. Vor allem wenn die Bilder alle das selbe Format bzw. Seitenverhältnis haben. Trifft das nicht zu, wird es ein wenig schwieriger, an dem Punkt waren wir ja schon Mal. Dafür sind dann diese Masonry-Skripts entwickelt worden, um auch in dem Fall die Bilder lückenlos in den Raum einzupassen.

Das trifft zu. Wenn Du z. B. den head-Bereich in eine externe Datei auslagerst, können dort auch Skripts oder das Einbinden von Skripts drin sein. Das Inkludieren geschieht ja auf dem Server und bei der Seite, die an den Browser gelangt, ist gar nicht mehr sichtbar, ob der Inhalt direkt notiert wurde oder inkludiert.

Hallo Elly, was das responsive Anordnen der Bilder betrifft, so gibt es dafür diverse Bibliotheken, so dass man hier das Rad nicht neu erfinden muss.

Das Masonry, das ich schon Mal erwähnt hatte:

https://masonry.desandro.com

Und dieses, das zeilenorientiert ist:

https://miromannino.github.io/Justified-Gall…ons-and-events/

Für das Problem gibt es selbstverständlich eine Lösung, hier wird es beschrieben:

https://wiki.selfhtml.org/wiki/PHP/Tutor…f_und_-fu.C3.9F

PS: Was das Bild-Hover betrifft, so hätte ich mir zuvor die Beispielseite ansehen sollen: Das ist ja gar kein Tooltip im üblichen Sinne, sondern die Beschreibung erscheint in der selben Größe wie das Bild. D. h. die Sachen, die die Positionierung betreffen, sind dort nicht relevant.

Zitat

Kann ich die Spalten irgendwie einfach untereinander anordnen bzw. nur 2 nebeneinander je nach Bildschirmgröße? Dann ist halt eine andere Bildreihenfolge drin. In dem Bootstrap-Beispiel bleibt die Reihenfolge erhalten, so als wären das davor keine Spalten gewesen.

In dem Bootstrap-Beispiel ist man ganz anders vorgegangen: Dort gibt es gar keine Spalten sondern die Bilder sind absolut positioniert und ihre Position wird abhängig vom gewünschten Layout durch Javascript fest gelegt. Das macht das Skript komplizierter aber ermöglicht es, dass beim Übergang von z. B. drei auf zwei Spalten die Bilder animiert an die neue Position fliegen.

Zitat

Ich habe ja .gallery-col img - wenn ich das in .gallery-item img ändere, haben die Bilder ihre tatsächliche Breite und nicht die 100% von der Spalte.

Im HTML-Inspektor erkenne ich in der mittleren Spalte ein Bild, das kein .gallery-item hat:

                <div class="gallery-col">
                    <img src="images/foto/testbild.jpg" style="transform: translateY(0px);">
                    <div class="gallery-item">
                        <img src="images/foto/testbild2.jpg" style="transform: translateY(200px);">
                        <div class="gallery-item-hover">
                            <h2>Testbild</h2>
                        </div>
                    </div>
                </div>

Daher wirkt das .gallery-item img wo die Breite auf 100% fest gelegt wird, nicht auf dieses Bild.

Ich nehme an, mit "Bild-Hover" meinst Du einen Tooltip? Davon kann man eine Basisversion problemlos nur mit CSS realisieren. Dann kann es jedoch passieren, dass der Tooltip, wenn das Bild sich gerade in einer Ecke des Browserfenster befindet, teilweise nicht sichtbar ist. Um das Problem zu lösen, muss man die Position des Tooltip intelligent abhängig von der Position des Bildes fest legen. Z. B. wenn das Bild sich links oben befindet, den Tooltip rechts unten platzieren.

Hierbei muss man das Rad nicht selbst erfinden, sondern es gibt fertige Bibliotheken, die das erledigen, z. B. Tooltipster oder popper.js, das häufig zusmmen mit Bootstrap verwendet wird.

Die Fehlermeldungen geben schon Hinweise, aber man muss ein wenig damit vertraut sein, wie die richtige Syntax aussieht.

Hier ctx.clear Rect(0, 0, 300, 300); ist clearRect mit Leerzeichen geschrieben.

Und hier ctx.drawImage(moon, -3.5, -3.5;); ist das Semikolon vor der schließenden Klammer überflüssig.

Häufig hilft es, wenn man sich die Doku ansieht, dann erkennt man bei clearRect, dass es zusammen geschrieben werden muss.

Zitat

Wenn der rechte und der linke Rand in einer Linie sein müssen, die Bilder aber unterschiedlich hoch sind - widerspricht sich das dann nicht?

Ich meinte damit die Linien, die ich hier mit violetten Pfeilen markiert habe:

html-seminar.de/woltlab/attachment/2872/