The Isotope documentation about ImagesLoaded suggest two methods for this. I generally use the second one, which means: initializing Isotope and trigger layout
after the images have been loaded. In my experience this works better, not that I have facts to proof it. Aside from that, I have it running this way successfully on a bunch of sites.
The javascript file looks like this:
jQuery(document).ready(function($) {
var $container = $('#your-id');
$container.isotope({
layoutMode: 'masonry',
itemSelector : '.your-class',
masonry: {
columnWidth: 200,
}
});
$container.imagesLoaded( function() {
$container.isotope('layout');
});
});
Related Posts:
- What is the preferred way to add custom javascript files to the site?
- Does the functions.php file ever get called during an AJAX call? Debug AJAX
- theme path in javascript file
- pass object/JSON to wp_localize_script
- Solutions for generating dynamic javascript / CSS
- Proper, exhaustive documentation for wp.editor etc
- Any alternate TinyMCE4 themes / subthemes?
- Is there a way to set the order of wp_footer hooked functions?
- Google Maps not displaying in wordpress using Google Maps Javascript API
- Trigger Customizer saving process with Javascript only
- What is the best practice for customizing a plugin’s JavaScript/jQuery?
- Changing the entire control choices using wp.customize with JavaScript
- How to Change CSS Variable value in Theme Customizer Live Preview
- Modifying JS files in Child-theme
- Whats the safest way to output custom JavaScript and Css code entered by the admin in the Theme Settings?
- WordPress Customizer Control with React
- How to configure wordpress to work with Vuejs with SSR and without hashbang
- How to hook CSS file according to theme selection in the customizer section
- How to correctly add JQuery in a WP theme?
- using wordpress without javascript
- Including Javascript options
- JavaScript Change focus to password field login page being reset
- jQuery not available to other scripts
- Single page site with history.js
- How to add material design css in wordpress and woocommerce
- Use second time navigation.js in underscores [closed]
- Theme Javascript.php Overwritten Nightly [closed]
- “Bad element for masonry: undefined” why this error us occuring? [closed]
- How to: JQuery multiple wordpress media uploader buttons in the same options page?
- How to get javascript slider to work! [closed]
- Theme Customizer not loading JS for live preview
- My jQuery is enqueued properly. So why isn’t it working?
- Enqueued JavaScript is not working
- Javascipt issue on custom theme
- How to register and enqueue JavaScript files without breaking plugin dependencies?
- wp_enqueue_script not working?
- How can I wrap all blog posts image with
- White screen when attaching css to function.php
- WordPress theme resource won’t load over VPN
- pass wordpress template directory into ajax url call
- theme-independent CSS/JS files
- Javascript development in Custom Themes
- add jquery file if a certain page is included
- enqueuing external and internal js and css in wordpress did not work with owl.js animate.css
- getBoundingClientRect() showing different values on load vs scroll
- wordpress script_loader_tag in function.php
- How to diagnose wp-env environment problem
- How to enqueue scripts properly with ES6 webpack?
- Ajax Comment Upvotes – Votes don’t always register
- change background image on scroll
- Customizer Image-Picker Preview Not Working
- Does any JavaScript file load automatically for index.php file?
- How would I get this to work – send to post from thick box
- Flexslider not working for my custom theme WordPress
- Theme customizer live preview JS- Trying to bind to an html image url without luck
- Can’t attach Javascript to theme
- Set start page depending on screen width [closed]
- wp_deregister_script was called incorrectly
- Paginated WP_Query doesn’t return 404’s, even when posts don’t exist
- Using wp_enqueue_script with social media buttons?
- How to convert that page to a wordpress template? [closed]
- wp_enqueue_script causes page to vanish
- How to reuse parts of WordPress site e.g. header, footer, part of header for multiple WordPress sites?
- Theme now uses require.js and enqueue script no longer works
- can’t add EVENT LISTENER to a element
- What is The Best Way to Make Parallax header effect for wordpress theme ?? pure CSS or using JavaScript? [closed]
- WP site makes mobile browser crash for high memory usage
- How can i move my product name & price from below thumbnail to be the rollover content in Avada & Woocommerce?
- jQuery Snippet Not Working on WordPress Site [closed]
- WP Customizer get control value on change
- Execute javscript when theme customizer loads (autosave issue)
- When trying to run build script with gutenberg (with SVG import) – Error: Plugin name should be specified
- Is there any halfway decent documentation on the wp.media JS class?
- How to make native video player full width?
- Retrieve the template directory URI via global or get_template_directory_uri() every time?
- Subdirectory install error
- How can i change menu link when page content empty?
- How can I remove specific custom post meta from the “Custom Fields” fieldset?
- How to load different CSS in different Header?
- How can I add an incremental class identifier to my sidebar widgets?
- How to preset a sidebar widget with default content via script?
- the_tags without hyperlinks?
- Implement advanced search
- How to append to menu items selectively
- Working with a WP Starter theme
- tag is being auto inserted
- Displaying details of a post in a sidebar
- Where do files uploaded via Media Manager get stored in MU?
- How to add menù section to my WordPress template?
- How to add post meta fields to an article’s as meta elements
- tag__in does not return posts
- Add content after get_header
- How to remove bullets from widget
- wanted to sort the wp_query array by two ACF field (Year and month)
- Created blank theme for REST API, featured image not appearing on admin side
- Using require_once for parent-directory not working but is working in sub-directories
- Add social media icon in header area
- Problem using $var for shortcode attr value
- How to output wp_enqueue_style() in HTML head instead of footer
- Add wrapper for a specific sub-menu