Rumah  >  Soal Jawab  >  teks badan

Cuba untuk membuat Masonry-Layout berfungsi dalam Safari dengan imagesLoaded

Saya berjaya melaksanakan Masonry-Gallery untuk laman web WordPress dengan menggunakan Bootstrap 5 digabungkan dengan "Masonry-Layout". Ia berfungsi dengan baik kecuali dalam Safari di mana susun atur sering rosak, ini adalah isu yang diketahui dan penyelesaiannya harus "imagesLoaded". Saya telah mencuba banyak tetapi saya tidak boleh menambah kelas yang diperlukan di tempat yang betul. Setahu saya kodnya adalah seperti berikut. Ada sesiapa boleh tolong?

<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粉458913655P粉458913655288 hari yang lalu563

membalas semua(1)saya akan balas

  • P粉226413256

    P粉2264132562024-01-29 16:20:18

    Lihat siaran saya tentang menambah Masonry ke tapak WordPress anda.

    https://www.customfitwebdesign.com/cara menambah susun atur batu dalam wordpress/

    Nota: Masonry sebenarnya dibina ke dalam teras WordPress ( wp-includes/js/masonry.min.js ). Versi WordPress Masonry ini juga termasuk ImagesLoaded (imagesloaded.min.js).

    balas
    0
  • Batalbalas