Ich versuche, Masonry-Layout in Safari mit imagesLoaded zum Laufen zu bringen
Ich habe Masonry-Gallery für die WordPress-Website erfolgreich implementiert, indem ich Bootstrap 5 in Kombination mit „Masonry-Layout“ verwendet habe. Es funktioniert großartig, außer in Safari, wo das Layout oft kaputt geht. Dies ist ein bekanntes Problem und die Lösung sollte „imagesLoaded“ lauten. Ich habe viel versucht, aber es gelingt mir einfach nicht, die erforderlichen Kurse an der richtigen Stelle hinzuzufügen. Soweit ich weiß, lautet der Code wie folgt. Kann jemand helfen?
<div class="row grid" id="gallery-masonry" data-masonry='{"percentPosition": true }'>
<?php
$images = get_field('gallery');
$size = 'large';
if( $images ): ?>
<?php foreach( $images as $image_id ): ?>
<div class="col-md-6 mb-3">
<div id="post-<?php the_ID(); ?>" class="card rounded-0" >
<?php echo wp_get_attachment_image( $image_id, $size, "", ["class" => "card-img-top rounded-0","alt"=>""]); ?>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<!--Masonry-Layout-->
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
<!--ImagesLoaded-->
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<!--Script ImagesLoaded-->
<script>
var $grid = $('.grid').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
// options...
});
});
</script>