isotope on Wallpress

if you have problem with the masonry layout when you try to implement the isotope , you can try to refer to my answer in this link : http://www.designwall.com/question/image-based-issues/

Well at first, i just think if you want to implement isotope, the layout can be broke so my code snippets just to make sure it’ll not be broken. You mean you want to reload the masonry after click event, that will not change page ? If you want that i can suggest option for you.

I’m not sure about your situation so can i have a clearly look at it ? maybe your website or picture.

Yes, exactly. I show or hide som elements with javascript and want masonry to arrange them nicely on the same page. 🙂

http://dev.wpwm.se/profil_wp/category/portfolio/parmar

ah , i see 🙂 , think in this case , you could use Ajax and PHP . You can use jquery to catch the category when click, send that category through ajax to the PHP file and then query the post with that category in that page.i think it my be a solution too.

Yes, that´s what I´m doing, but the thing is I don’t get the card to re-arrange and I think the trick is to re-init masonry, but it won´t work. 🙁 I´ve tried different calls from the original query.custom.js-file. Do you know the magic call? 😉

i think the point in here is about the content inside the masonry after you click your card and the action for masonry should be done after Ajax call. Maybe you should use this handle : .ajaxComplete( ) to call the mansory reload 🙂
try read more at here: http://api.jquery.com/ajaxcomplete/

i think it could work 🙂

Hi again and thanks for barring with me… I feel a bit stupid. I think you are on to a solution, but I´m not sure what the call should be.
The only way I get som functionality is with this code in the parent theme /assets/js/jquery.custom.js file:
//Ajax complete -> reload masonry
$container.ajaxComplete(function() {
itemSelector: item_selector,
isAnimated: true,
isFitWidth: true,
isResizable: false,
columnWidth: function() {
return (basewidth==0)?200:basewidth;
}
});
And this code in the same file in the child-theme:
//Filter functions
jQuery(‘body’).on(‘click’, ‘.search_check’, function() {
slug = jQuery(this).attr(‘id’).replace(‘filter-‘,”);
if (jQuery(this).children(‘.toggle’).children(‘span’).attr(‘class’).indexOf(‘filter_on’) > -1) {
jQuery(this).children(‘.toggle’).children(‘span’).removeClass(‘filter_on’);
jQuery(this).children(‘.toggle’).children(‘span’).addClass(‘filter_off’);
jQuery(‘.category-‘+slug).toggle();
}
else {
jQuery(this).children(‘.toggle’).children(‘span’).removeClass(‘filter_off’);
jQuery(this).children(‘.toggle’).children(‘span’).addClass(‘filter_on’);
jQuery(‘.category-‘+slug).toggle();
}
});

But that destroys the layout when the page is loaded and somehow overrides the animation feature.

This code is live on http://dev.wpwm.se/profil_wp/category/portfolio if you want to try it out.

Got any answers/ideas?

Hi i realize some strange things in that site. the items there Are not masonry bricks( don’t have the class masonry-brick ) , some how that class attract to the <div id="item-search">. Well, i’ll try to work on this feature this weekend.That will be a very good improvement for the theme. Thanks.

Yeah, I just realized that I somehow killed the masonry. Do you have an example how to use the .ajaxComplete()-call?

$( ".someclass" ).click(function() {
//You will do the Ajax here to get all the Item you need by query them out, put them in the masonry class that wrap them( item_selector )
});
$( document ).ajaxComplete(function() {
$(‘.item_selector’) .masonry( ‘reloadItems’ );
});
I can advice you like this : the point here is the Item you will have after Ajax Call.

Thank you again, but I just realized that there is no ajax call in the filtering function. It just toggles the categories. So I´ve made the function (for now) like this:

//Filter function
jQuery(‘body’).on(‘click’, ‘.search_check’, function() {
slug = jQuery(this).attr(‘id’).replace(‘filter-‘,”);
if (jQuery(this).children(‘.toggle’).children(‘span’).attr(‘class’).indexOf(‘filter_on’) > -1) {
jQuery(this).children(‘.toggle’).children(‘span’).removeClass(‘filter_on’);
jQuery(this).children(‘.toggle’).children(‘span’).addClass(‘filter_off’);
jQuery(‘.category-‘+slug).toggle();
}
else {
jQuery(this).children(‘.toggle’).children(‘span’).removeClass(‘filter_off’);
jQuery(this).children(‘.toggle’).children(‘span’).addClass(‘filter_on’);
jQuery(‘.category-‘+slug).toggle();
}
if (confirm(‘Masonry?’)) {
jQuery(‘.item’).masonry(‘reloadItems’);
}
});

The "confirm" statement should keep Masonry from reloading until I click "OK", right? But it does´t seem to work. 🙁
http://dev.wpwm.se/profil_wp/category/portfolio

cannot call methods on masonry prior to initialization; attempted to call method ‘reloadItems’.. this is in the console tab.
And because the way you resolve this problem not like my idea so it’s a bit confuse for me then :). And i think removeClass() will not make the item remove from the masonry, it’s just hidden. in my opinion i think this could be done easier with isotope 😀 it’s only need to put the right class to each item 🙂