Images loaded for masonry

  • I have applied masonry to my page layout using the below code in my functions:

    function my_masonry(){
    wp_enqueue_script(‘masonry’);
    }
    add_action(‘wp_enqueue_scripts’, ‘my_masonry’);

    And then on my page template:

    <div id=”container” class=”js-masonry”data-masonry-options='{ “columnWidth”: 15, “itemSelector”: “.HM-event” }’>

    <?php
    echo do_shortcode(‘[events_list limit=”9″]

    <div class=”HM-event”>
    <div class=”HM-pic”>#_EVENTIMAGE{300,0}</div>
    <div class=”HM-eventnm”>#_EVENTLINK</div>
    <div class=”HM-eventdt”>#_EVENTDATES</div>
    <div class=”HM-venue”>
    #_ATT{Venue}</div><div class=”tickets”>#_ATT{Tickets}</div>
    </div>

    This works fine, except in Safari, where all of the blocks overlap, I understand I need to have imagesLoaded but I don’t know where to put what for this to work?! Please help!

Viewing 2 replies - 1 through 2 (of 2 total)

  • I also need help with this!

    I managed to get imagesLoaded to enqueue by using the following script. But I don’t understand how to get the page to only run masonry once the imagesLoaded function is “true.”

    wp_enqueue_script( 'imagesLoaded',
 get_stylesheet_directory_uri() . '/_/js/imagesloaded.pkgd.min.js', array( 'jquery' ) );

    I added a jQuery function to initialize Masonry after all images have loaded.

    See the appendix here for info: https://masonry.desandro.com/appendix.html

    This can be added to your functions.php

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Images loaded for masonry’ is closed to new replies.