Beiträge von Elly

Elly · 12. Februar 2021

Ich hab's jetzt nochmal upgedated. Mich hat container gestört, da steht jetzt gallery. Jmd anderes hat #container vl schon anderweitig verbaut.

Nachdem wir dafür jetzt die richtige ID haben, wäre sogar das möglich, was ich scon 100x durchgespielt hab.

Code

this.items = Array.prototype.slice.call( document.querySelectorAll( '#' + this.el.id + ' div ' ) );

this.el.id ist jetzt nämlich container bzw. neu gallery und das ganze ist ein div. In der LI-Variante war da ja noch ' > li ' - also war dem LI das UL übergeordnet und das hatte die ID grid im Original. Mit Klasse statt ID geht's tatsächlich nicht, da stört die 2. Klasse effect-1 dann.

Elly · 12. Februar 2021

Soooo, gut Ding braucht echt Weile! Danke! Der ausschlaggebende Tipp war tatsächlich ID container anzusprechen. Interessant, solche Dinge habe ich vorher alle durchprobiert, nur container nicht. Extra DIVs erstellt usw... Und am Ende ist es eine bestimmte Kombi, die es dann ausmacht.

Jetzt bin ich happy! Das normale Masonry braucht man also für die Animation nicht umzuschreiben, sondern nur zu ergänzen. Das war das Ziel.

Ich teil mal hier den Code und das Package.

HTML

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">

<script src="scripts/jquery-3.5.1.min.js"></script>
<script src="scripts/modernizr.custom.js"></script>

<!-- BEGIN OF Style for Masonry Gallery -->
<style>
.grid {
    margin:0 auto;
    padding:0;
    width:100%;
    border:solid 2px red;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
    width:16%;
    box-sizing:border-box;
    background-color:lightgrey;
    margin-bottom:10px;
}

@media (max-width: 1260px) {
    .grid-item {
        width:24%;
    }
}

@media (max-width: 960px) {
    .grid-item {
        width:32%;
    }
}

@media (max-width: 480px) {
    .grid-item {
        width:100%;
    }
}

.grid-item img {
    width:100%;
}

/* ANIMATION */
.grid-item {
    opacity: 0;
}

.grid-item.shown,
.no-js .grid-item,
.no-cssanimations .grid-item {
    opacity: 1;
}

/* Effect 1: opacity */
.grid.effect-1 .grid-item.animate {
    -webkit-animation: fadeIn 0.8s ease forwards;
    animation: fadeIn 0.8s ease forwards;
}

@-webkit-keyframes fadeIn {
    0% { }
    100% { opacity: 1; }
}

@keyframes fadeIn {
    0% { }
    100% { opacity: 1; }
}

/* Effect 2: Move Up */
.grid.effect-2 .grid-item.animate {
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-animation: moveUp 0.8s ease forwards;
    animation: moveUp 0.8s ease forwards;
}

@-webkit-keyframes moveUp {
    0% { }
    100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
    0% { }
    100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
</style>
<!-- END OF Style for Masonry Gallery -->

<title>Masonry-Test</title>
</head>

<body>


<div id="gallery" class="grid effect-1">
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">1
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">2
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">3
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">4
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">5
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">6
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">7
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">8
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">9
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">10
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">11
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">12
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">13
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">14
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">15
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">16
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">17
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">18
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">19
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">20
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">1
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">2
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">3
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">4
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">5
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">6
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">7
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">8
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">9
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">10
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">11
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">12
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">13
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">14
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">15
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">16
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">17
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">18
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">19
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">20
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">1
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">2
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">3
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">4
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">5
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">6
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">7
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">8
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">9
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">10
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">11
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">12
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">13
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">14
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">15
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">16
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">17
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">18
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">19
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">20
    </div>
</div>
</div>


<!-- START OF Animated Masonry Gallery -->
<script src="scripts/masonry.pkgd.js"></script>
<script src="scripts/imagesloaded.pkgd.js"></script>
    <!-- Masonry is initialized and imagesloaded is checked by AnimOnScroll -->

    <!-- only for animation -->
<script src="scripts/classie.js"></script>
<script src="scripts/AnimOnScroll-div.js"></script>
    <script>
            new AnimOnScroll( document.getElementById( 'gallery' ), {
            minDuration : 0.4,
            maxDuration : 0.7,
            viewportFactor : 0.2
        } );
    </script>
<!-- END OF Animated Masonry Gallery -->


<!-- START OF (not animated) Masonry Gallery
<script>
    // options for Masonry
    var $grid = $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-item',
        gutter: 10,
        percentPosition: true,
        horizontalOrder: true,
        originLeft: true,
        originTop: true,
        transitionDuration: '0.5s',
        /*
        // *disable initial layout (for event listener)
        initLayout: false
        */
    });

/*
// *add event listener for initial layout
$grid.on( 'layoutComplete', function( event, items ) {
  console.log( items.length );
});

// *trigger initial layout
$grid.masonry();
*/

// layout Masonry after each image loads (for not overlaying elements)
    $grid.imagesLoaded().progress(function () {
        $grid.masonry('layout');
    });
</script>
-->

</body>
</html>

Alles anzeigen

Elly · 12. Februar 2021

Das mit 1 und 2 Klassen hatte ich schon mal durchprobiert, mit einem neuen DIV um die grid-items, funktioniert hat's nicht.

Aber, das Gute ist schon mal: Das Masonry läuft wieder, seit ich den Code oben mit container geändert hab. Der zweite Tipp bringt tatsächlich auch die Klasse mit! Yessss, endlich! Die Animation klappt noch nicht, da hab ich sicher was an den CSS-Selektoren verbockt.

Ich hatte übrigens folgendes auch schon ausprobiert, aber da hat es noch keine Klasse geliefert. Wahrscheinlich weil das mit container nicht drin war. Jetzt klappt das so auch.

Code

this.items = Array.prototype.slice.call( document.querySelectorAll( 'div.grid-item' ) );

Elly · 12. Februar 2021

Das ging mir auch schon durch den Kopf. Allerdings funktioniert es in der LI-Variante trotzdem. Ich hab schon versucht, den nötigen Code aus meiner HTML in die JS zu setzen, allerdings sind die Bilder dann alle nur untereinander. Und in der JS muss es ja vorkommen, da der andere Code davon abhängig ist.

Hab das gern jetzt so auch nochmal raufgeladen.

Der Fehler muss irgendwo im Zusammenspiel mit JS und Classie sein bzw. an der Bezeichnung in den gennanten JS-Zeilen und im CSS-Code. Den Tags werden die animated-Klassen nicht übergeben. Da muss was falsch bezeichnet sein und ich finde es nicht.

Elly · 12. Februar 2021

Du meinst, es wird nur 1 Klasse verlangt, aber wenn da 2 stehen, werden automatisch beide genommen und dann klappt's nicht?

Hab das nochmal mit ID durchgespielt, klappt aber auch nicht.

Dann hab ich's auf className umgeschrieben. Ich meine jetzt vl was besser gemacht zu haben, funktionieren tut's noch immer nichtl

Elly · 12. Februar 2021

So, hier nochmal ein Versuch mit der DIV-Variante. Funktioniert leider noch nicht. Relevant im JS sind mMn nur Z89 und Z100. Da hab ich jetzt einiges durchprobiert, ich kriegs aber noch nicht hin. Letzten Endees übergibt der Classie noch nicht die nötigen Klassen.

Im CSS sieht's so aus, dass es mit .grid-item div die Bilder gleich anzeigt und mit .grid div alles auf transparent steht. Verstehen tu ich das aber nicht, da ich damit doch die gleichen DIVs anspreche? Innerhalb von .grid und von .grid-item sind ja dieselben DIVs.

Im JS der HTLM-Seite hab ich nun auch Class statt ID drinnen.

Elly · 12. Februar 2021

Ne, ich hab die fertige Version aktualisiert, die jetzt läuft. Deswegen.

Ich versuch mich jetzt nochmal an den DIVs. Einfach auch deshalb, weil ich es so gar nicht mag, wenn ich was nicht hinkrieg.

Zumindest Fancybox 3 geht auch in einem Listenelement, siehe hier:

https://jsfiddle.net/Sempervivum/xr6hm8zg/3/

Die war in Planung, genau!

Elly · 12. Februar 2021

Ja, das schon. Und an einer anderen Stelle auch. Ersetze ich das dort durch IMG, funktioniert das aber noch nicht. Das ist es ja...ich dachte, es wär ganz einfach, die bestimmten Stellen zu ersetzen, aber irgendwo versteckt sich wohl was.

Hab jetzt mal deinen Tipp befolgt und mein Masonry in eine Liste verwandelt. Das klappt. Ander's wär's mir lieber gewesen.

Dargestellt wird es allerdings noch nicht ganz richtig, als würde der Imageloader jetzt streiken. Ich hab's so eingestellt, dass ich 6 Bilder nebeneinander krieg. Jetzt zu finden unter anim4. Lädt die Seite, sind da 6 Bilder nebeneinander, aber falsch geladen (zT übereinander). Aktualisier ich dann, sind die Bilder richtig geladen, aber nur noch 5 nebeneinander. Da muss ich mal schauen, ob da irgendwo jetzt Abstände durch die LI dazugekommen sind. Aber laden sollte derSpaß natürlich schon vernünftig.

PS:

Er scheint richtig zu laden, wenn die class grid nur bei UL vorkommt und ausm DIV raus ist. Coole Sache!

Der .grid war noch ein padding 0 hinzuzufügen, jetzt stimmt auch die Anzahl der Bilder wieder.

Meint ihr, das ist jetzt problematisch, dass das eine Liste ist anstatt mit DIVs verarbeitet?

Elly · 12. Februar 2021

So wie Murphy das beschreibt, hab ich das eig auch gemacht. Nur eben umgekehrt. Ich wollte das CSS und das JS anpassen und nicht meine Mansory-Konfiguration.

Die Animation-Seite verwendet auch Masonry 3, sie hat auch keinerklei Klassen oder sonst was drinstehen, ich hab noch nichtmal gefunden, wo sie ihr Masonry überhaupt triggert.

Es sollte eig funktionieren, das JS anzupassen. Wenn das dann klappt, müsste man im CSS eig nur LI durch IMG ersetzen.

Wenn ich dann noch Bildbeschreibungen hinzufüge und eine Lightbox einbaue, werd ich wohl auch DIVs brauchen. Und die will/kann ich ja dann nicht in die LIs einbauen.

Elly · 10. Februar 2021

Das gute Ding steht jetzt. Nun versuch ich, Scroll-Effekte einzubauen. Ob das nun gut oder schlecht ist, sei mal dahingestellt. Ich möchte es halt gern ausprobieren und was dazulernen. Die Effekte 1 und 2 sind ja ganz annehmbar.

Das ganze basiert auf li-Items. Hab schon Verschiedenes durchprobiert, noch läuft es nicht. In der AnimOnScroll.js sollen alle li-Items animiert werden. Ich hab das dort mal zu img geändert. Diese JS basiert auf der Classie.js, die dazu dienen soll, diverse CSS-Klassen hin- und herzutauschen. Daran scheint es bei mir zu scheitern. Ich sehe jedenfalls keine Bilder, da sie auf opacity:0 stehen, aber im ausgeführten Code auch keine Klassen. Original stehen in dem Demo-Code auch keine Klassen, absolut nix, wird alles über Classie geregelt.

Ich hab das IMG dann auch wieder zu LI zurückgetauscht und sogar die original CSS eingebunden, alle JS natürlich auch. ID grid hab ich auch hinzugefügt, um das Script auszuführen, wobei getElementByClass ja auch gehen würde.

Meine Vorgehensweise wäre eig, den Grundstock zu übernehmen und dann Schritt für Schritt zu ändern.

Bevor ich also hier nochmal einen Link poste, probiere ich noch ein Weilchen.

//

So, nun bin ich tatsächlich weitergekommen. Die Animation funktioniert, dafür ist jetzt mein ganzes Raster nicht mehr das, was es war. Das liegt jetzt wahrscheinlich an den LI. Dazu gibt's im AnimOnScroll 2 Einträge, die ich durch IMG ersetzen möchte. Zudem will ich hier ( '#' + this.el.id + ' li ' ) ) eig auch nicht mit IDs, sondern mit Klassen arbeiten. In Zeile 100 gibt's nochmal ein LI. Im CSS habe ich dann auch alle LI durch IMG ersetzt. Aber so einfach scheint das leider nicht zu sein. Ich würd schon gern bei meinen .grid-items bleiben ohne LI, also mein Original-Masonry-Gerüst beibehalten und die Skripten daran anpassen. Am Ende möchte ich dann nur noch <div id="container" class="grid effect-1"> stehen haben. Also die Animation über die Klasse triggern.

Was der Modernizr damit zu tun hat, hab ich noch nicht rausgefunden. Aber ohne ihn läuft die Animation nicht.

Warum die Bildgröße nur noch bei jedem x-ten Bild passt, weiß ich auch nicht, aber das ist am Ende ws nicht das Problem, weil ich das bestimmt von selbst löst, wenn die LI weg sind.

Das hier ist nun der letzte Zustand, an dem die Animation funktioniert hat. Jetzt steh ich an.

Elly · 10. Februar 2021

Hier mal der komplette Code, falls ich die Seite mal lösche... sollte sich nochmal jmd damit rumquälen.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<script src="scripts/jquery-3.5.1.min.js"></script>

<!-- START OF Masonry Gallery -->
<script src="scripts/masonry.pkgd.js"></script>
<script src="scripts/imagesloaded.pkgd.js"></script>
    <!-- Options see body -->

<style>
.grid {
    margin:0 auto;
    width:100%;
}

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
    width:16%;
    box-sizing:border-box;
    background-color:lightgrey;
    margin-bottom:10px;
}

@media (max-width: 1260px) {
    .grid-item {
        width:24%;
    }
}

@media (max-width: 960px) {
    .grid-item {
        width:32%;
    }
}

@media (max-width: 480px) {
    .grid-item {
        width:100%;
    }
}

.grid-item img {
    width:100%;
}

</style>
<!-- END OF Masonry Gallery -->

<title>Masonry-Test</title>
</head>

<body>


<div id="container" class="grid">
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">1
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">2
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">3
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">4
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">5
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">6
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">7
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">8
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">9
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">10
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">11
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">12
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">13
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">14
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">15
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">16
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">17
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">18
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild.jpg">19
    </div>
    <div class="grid-item">
        <img src="images/foto/testbild2.jpg">20
    </div>
</div>


<div id="container" class="grid">
    <div class="grid-item">
        <img src="images/web_ph.jpg">1
    </div>
    <div class="grid-item">
        <img src="images/print_ph.jpg">2
    </div>
    <div class="grid-item">
        <img src="images/foto_ph.jpg">3
    </div>
    <div class="grid-item">
        <img src="images/web_ph.jpg">4
    </div>
    <div class="grid-item">
        <img src="images/print_ph.jpg">5
    </div>
    <div class="grid-item">
        <img src="images/foto_ph.jpg">6
    </div>
    <div class="grid-item">
        <img src="images/web_ph.jpg">7
    </div>
    <div class="grid-item">
        <img src="images/print_ph.jpg">8
    </div>
    <div class="grid-item">
        <img src="images/foto_ph.jpg">9
    </div>
    <div class="grid-item">
        <img src="images/web_ph.jpg">10
    </div>
    <div class="grid-item">
        <img src="images/print_ph.jpg">11
    </div>
    <div class="grid-item">
        <img src="images/foto_ph.jpg">12
    </div>
</div>

<script>
    // options for Masonry
    var $grid = $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-item',
        gutter: 10,
        percentPosition: true,
        horizontalOrder: true,
        originLeft: true,
        originTop: true,
        transitionDuration: '0.5s',
        /*
        // *disable initial layout (for event listener)
        initLayout: false
        */
    });

/*
// *add event listener for initial layout
$grid.on( 'layoutComplete', function( event, items ) {
  console.log( items.length );
});

// *trigger initial layout
$grid.masonry();
*/

// layout Masonry after each image loads (for not overlaying elements)
    $grid.imagesLoaded().progress(function () {
        $grid.masonry('layout');
    });
</script>

</body>
</html>

Alles anzeigen

Elly · 10. Februar 2021

Zitat von PeterLustig9

Wo muss ich die Box in der HTML-Datei einfügen?

Ich hab meine Testseite ja verlinkt. Da klickst du rechte Maustaste - Quelltext anzeigen. Dann siehst du alles schön.

Das mit dem z-index ist eine coole Sache. Nur brauchst du dann ein Bild, dass danach wieder verschwindet. Also quasi dasselbe Problem.

Ich glaub, dass das Schnipsel von mir ein Anfang ist, vl kann da jmd anderes weiterhelfen. Ich kenne mich mit JS leider noch nicht gut aus.

Elly · 10. Februar 2021

Sooo, gut Ding braucht wohl Weile.

Ich hab's jetzt raus.

Das Script muss doch zur Gänze in den Body UND das data-masonry im Container raus. Dann greift alles.

Hab die Datei aktualisiert. Oben ist das data-masonry noch drin, unten (bunt) ist es raus. Nun kann auch das Padding wieder raus... Und es tut endlich das, was es soll.

Was ich allerdings nicht verstehe. Sowas steht nicht in der Anleitung. Was wo hinmuss... Na gut. Rätsel gelöst. Jetzt kommen die Spielereien.

Elly · 10. Februar 2021

Ich brauche das data-masonry im DIV, sonst funktioniert das ganze Raster überhaupt nicht. Echt interessant - 2 User, 2 Ergebnisse.

Ich hab's jetzt über padding gelöst. Margin würde natürlich auch gehen, aber mit padding und border-box lassen sich die Prozente schöner angeben. Hab auch schon media queries eingebunden. Bin eig ganz stolz drauf, was dabei jetzt rausgekommen ist.

Schau mal! :-)

PS: Der graue Hintergrund dient natürlich nur der Veranschaulichung.

Aber interessant, egal was ich ins JS schreibe, es greift nicht. Das mit der Breite hat aber geklappt, steht ja auch dort drin. Wenn ich da jetzt horizontalOrder: true setze, passiert genauso nichts wie bei gutter. Also langsam glaube ich, es liegt nicht mehr an mir, sondern an der masonry.js.

Elly · 10. Februar 2021

Eben, das hab ich ja extra rausgenommen, damit alles schön über JS läuft.

Natürlich kann ich den Abstand auch über CSS regeln. Ich will aber, dass das gute Ding so funktioniert wie es laut Anleitung auch soll. Diese ist ja eig auch sehr schön...

Elly · 10. Februar 2021

Halleluja! Da wär ich ja nie draufgekommen! Wahrscheinlich steht deswegen bei den 200 auch nicht '200px' drinnen. Immerhin klappt die Größe jetzt!

Übrigens klappt das mit dem gutter nur, wenn das Script im Header steht. Und auch dann trotzdem nicht richtig. Was passiert? Wenn das Script im Body steht, sieht man zuerst einen kleinen Abstand zwischen den Bildern, der dann zusammenfällt. Wenn's im Header steht, ist tatsächlich ein Abstand da, aber nicht der, den man eingestellt hat, sondern immr gleich viel - geschätzte 10px. Verschiebt man die Fenstergröße, fällt auch da der Abstand zusammen. Nur bei F5 ist er wieder da, egal wie groß das Fenster dann ist.

Ist doch echt komisch! Selbst wenn ich percentPosition dazunehme.

Das mit imagesLoaded muss auf jeden Fall im Body stehen, sonst geht die Funktion nicht.

Zitat

Set percentPosition: true so item positions are likewise set with percentages to reduce adjustment transitions on window resize.

Elly · 10. Februar 2021

Also es ist wohl echt zum Verzweifeln.

Ich häng jetzt auch mal Screenshots an. Wenn ich im HTML die Einstellungen ganz drinlasse, dann schaut's ich sag mal anders aus, richtiger. Aber richtig ist es wohl trotzdem nicht, denn mit 50% düften ja nur 2 Bilder in einer Reihe sein. 1237

Nehm ich das aus dem HTML raus und lass nur data-masonry dortstehen, ist das Raster da, aber ohne Abstände und auch die 50% werden natürlich nicht genommen. 1238

Nehm ich das data-masonry aus dem HTML auch noch raus, liegen alle Bilder auf einem übereinander, also das zumindest muss drin stehen bleiben.

So, jetzt kommt's aber. Samt imagesLoad wird in Chrome alles falsch angezeigt, erst nach F5 ist das Raster sichtbar. Natürlich auch ohne die Einstellungen.

Und meine foto.php ist in Firefox ein Chaos und in Chrome richtig. Schön, dass es in Chrome passt. Da habe ich die Sachen im Header stehen. Aber warum dann in Firefox nicht? JS ist ja doch so weit entwickelt, dass alle neuen Browser dasselbe unterstützen und dieses Masonry ist ja jetzt auch nicht so neu.

Edit: Dass es in Chrome funktioniert und in Firefox nicht war leider bei der alten Version mit den alten Testbildern. Und lokal hatte ich bereits eine andere Datei... Ich kann also leider überhaupt nicht mehr nachvollziehen, welche Version das nun war.

Elly · 10. Februar 2021

Danke, da bin ich gespannt, obs dann klappt.

Bei meinem ersten Versuch auf der foto.php hab ich das ja drin und da war alles verschoben, was wohl aber auch an den CSS Klassen lag. Warum auch immer. Aber da hab ich das JS auch noch im Header stehen, weil ich dachte, der Browser muss ja wissen, was er tun soll, bevor er den Content lädt.

Mit einer Einstellung hab ich es gestern schon geschafft, dass der Gutter bzw das ganze JS funktioniert hat (glaub es war nur, dass ich das JS in den body stellte), aber nur mit Pixeln und für responsive brauche ich ja Prozent.

Danke erstmal, testen kann ich erst am Nachmittag.

Elly · 9. Februar 2021

Letzten Endes werden die Bilder ganz unterschiedliche Formate haben. 2:3 und 3:4 jeweils hoch und quer.

Elly · 9. Februar 2021

Schau mal, dann fällt mir das ganze Masonry zusammen. Die Bilder liegen versetzt gestapelt übereinander.

.grid-item hab ich testweise jetzt auf 200px gesetzt.

Bei JS hab ich 200 stehen lassen, das war original schon so. Wenn ich 200 in CSS schreibe, weiß ich gar nicht, welche Maßeinheit das dann sein soll.

Wenn ich im JS bei columnWidth rumspiele, ändert sich schon was. Also das JS funktioniert jedenfalls. Dort ist es ohne Maßangabe automatisch Pixel. Wenn ich Prozent angebe '40%', dann fallen mir die Bilder alle auf eins zusammen.

Dann schreib ich im HTML data-masonry wieder rein, ohne Eigenschaften, dann ist das Raster wieder richtig, aber das JS wird nicht mehr angenommen.

Es fuchst... Was läuft da schief?

Ich lad das genau so jetzt nochmal rauf.

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.

Beiträge von Elly

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Sidebar bei OnePage Website einblenden lassen

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)

Masonry JS von DeSandro (Lösungscode inkl. Animation Post #39 bzw. #50 mit Overlay)