css - jquery masonry collapsing on initial page load, works fine after clicking "home" menu button -
my jquery masonry setup working strangely on initial page load. seems placing images in first row fine, second row positioned overlapping first , same third row. after page load, can click home button or logo , reload page , works fine.
i have code in functions.php put masonry , 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 in 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 link site.
any idea why loading strangely on initial page load?
i'm pretty new scripting anything, please kind.
i think it's because script being run before content (images) not loaded. hence positioning error.
try this.
$(window).load(function() { $('#content').masonry({ itemselector : '.product', columnwidth : 310, isanimated: true, animationoptions: { duration: 700, easing: 'linear', queue: false } }); });
Comments
Post a Comment