Topic: Masonry conflicts

← Back to discussions

Resolved

Posted in: Boldial WP

Member

mirko

March 12, 2015 at 12:55 pm #7176

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 !!

This topic was modified 9 years by mirko.

Sorry, this forum is for verified users only. Please Login / Register to continue
or get 6 months support forum access to all forum topics for a reduced price.

Masonry conflicts

Support Us

Themes Support

Our Themes