Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery masonry collapsing on initial page load, works fine after clicking "home" menu button

My jquery masonry setup is working strangely on initial page load. It seems to be placing the images in the first row fine, the second row is positioned overlapping the first and the same for the third row. After page load, you can click the home button or the logo and reload the page and it works fine.

I have this code in the functions.php to put the masonry and jquery scripts in:

if (!is_admin()) {
    wp_enqueue_script('jquery');
    wp_register_script('jquery_min', get_template_directory_uri(). '/js/jquery.min.js', array('jquery'), '1.6.1' );
    wp_enqueue_script('jquery_min');
    wp_enqueue_script('jquery');
    wp_register_script('jquery_masonry', get_template_directory_uri(). '/js/jquery.masonry.min.js', array('jquery'), '2.1.06' );
    wp_enqueue_script('jquery_masonry');
}

This script is in the head.php:

<?php if (is_page(2)) { ?>
    <script>
        $(function(){
            $('#content').masonry({
                // options...
                itemSelector : '.product',
                columnWidth : 310,
                isAnimated: true,
                animationOptions: {
                    duration: 700,
                    easing: 'linear',
                    queue: false
                }
            });
        });
    </script>
<?php } ?>

This is a link to the site.

Any idea as to why this is loading strangely on initial page load?

I'm pretty new to scripting anything, so please be kind.

like image 783
John B Avatar asked Mar 01 '13 14:03

John B


2 Answers

I think it's because the script is being run before the content (images) is fully loaded. Hence the positioning error.

Try this.

  $(window).load(function()
  {
      $('#content').masonry({
           itemSelector : '.product',
           columnWidth : 310,
           isAnimated: true,
           animationOptions: {
                duration: 700,
                easing: 'linear',
                queue: false
           }
      });
  });
like image 58
Glorious Kale Avatar answered Nov 04 '22 07:11

Glorious Kale


I also had a similar issue, images were overlapping at the first loading time. I overcame this by first loading the images.

$(".id").imagesLoaded(function(){
    $('.id').masonry({
        itemSelector: '.scrapcontent',
        columnWidth: 3,
        isAnimated:true,
        animationOptions: {
            duration: 700,
            easing:'linear',
            queue :false
        }
    });
}

If the images are loaded then your masonry's duty has to start. It should work fine.

like image 35
user2196414 Avatar answered Nov 04 '22 07:11

user2196414