Essayer de faire fonctionner Masonry-Layout dans Safari avec imagesLoaded
P粉458913655
P粉458913655 2024-01-29 00:09:26
0
1
575

J'ai implémenté avec succès Masonry-Gallery pour le site Web WordPress en utilisant Bootstrap 5 combiné avec « Masonry-Layout ». Cela fonctionne très bien sauf dans Safari où la mise en page se casse souvent, c'est un problème connu et la solution devrait être "imagesLoaded". J'ai beaucoup essayé mais je n'arrive tout simplement pas à ajouter les cours requis au bon endroit. Autant que je sache, le code est le suivant. Quelqu'un peut-il m'aider ?

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

P粉458913655
P粉458913655

répondre à tous(1)
P粉226413256

Consultez mon article sur l'ajout de Masonry à votre site WordPress.

https://www.customfitwebdesign.com/how to add maçonnerie layout in wordpress/

Remarque : la maçonnerie est en fait intégrée au cœur de WordPress ( wp-includes/js/masonry.min.js ). Cette version WordPress de Masonry inclut également ImagesLoaded (imagesloaded.min.js).

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal