Masonry conflicts

mirko — Thu, 12 Mar 2015 10:55:47 +0000

Hello !

I have chosen to set up the blog overview as a Masonry grid, as it is easier to customize in CSS.

At first, I noticed that nothing was appearing when I activated it. Then I remembered that I had to put Masonry effects on two specific pages. When I removed the code, everything went back on the overview page as expected.

However, I’m loosing the Masonry on my custom pages… And it’s a shame.

Here is how the code looks, on an overriding footer.php page :


			var $j = jQuery.noConflict();
			    $j(document).ready(function() {
			        var container = document.querySelector('#mainwrapper');
		      		var msnry;
		      		// initialize Masonry after all images have loaded
		      		imagesLoaded( container, function() {
		       		msnry = new Masonry( container, {
		                  // options
		                  isFitWidth: true,
		                  gutter: 65,
		                  itemSelector: '.ee_grid_box'
		                });
		      		});
			});

			var $j = jQuery.noConflict();
			    $j(document).ready(function() {
			        $j('.tabs_events li a').click(function() {
			            var container = $j('.ui-tabs-panel');

			            container.imagesLoaded( function(){
			            container.masonry({
			            	gutter: 65,
			            	isFitWidth: true,
			                itemSelector : '.ee_grid_box'
			              });
			            });
			        })
			});

var $j = jQuery.noConflict();

$j(document).ready(function() {

var container = document.querySelector('#mainwrapper');

var msnry;

// initialize Masonry after all images have loaded

imagesLoaded( container, function() {

msnry = new Masonry( container, {

// options

isFitWidth: true,

gutter: 65,

itemSelector: '.ee_grid_box'

});

var $j = jQuery.noConflict();

$j(document).ready(function() {

$j('.tabs_events li a').click(function() {

var container = $j('.ui-tabs-panel');

container.imagesLoaded( function(){

container.masonry({

gutter: 65,

isFitWidth: true,

itemSelector : '.ee_grid_box'

});

})

});

How can I make it work without creating conflicts with your Masonry triggers ?

Thanks in advance !!

Reply To: Masonry conflicts

IshYoBoy — Fri, 13 Mar 2015 08:35:33 +0000

Hey,

Can’t really say why there are conflicts. What are the JS Errors that are triggered. I am sure there is a way to make both work side by side.

Do you have a link where we can see the conflict present to get more information about the problem?

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Masonry conflicts

mirko — Fri, 13 Mar 2015 14:12:23 +0000

Hi !

Well, in fact, no need for it, working on an other project made me realize my error, I was calling my scripts too earlier, right before the wp_footer();

Sorry for the bothering !

Cheers,

Reply To: Masonry conflicts

IshYoBoy — Mon, 16 Mar 2015 04:58:30 +0000

Hey,

Sure thing ;) We though the problem might have been caused by a similar cause. Glad you got it working.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Support ForumMasonry conflicts – Support Forum

Masonry conflicts

Reply To: Masonry conflicts

Reply To: Masonry conflicts

Reply To: Masonry conflicts