Discussion on Magnet - JavaScript Library and jQuery Plugin to Create Filterable and Sortable Layouts


HaundoDesign supports this item


This author's response time can be up to 1 business day.

32 comments found.

Great plugin, thank you!

Am I able to default to a selected filter when the user lands on the page? Instead of first seeing all items, I’d like them to only see the items from the selected filter when they first land. Please let me know if this is possible.

Thank you!

One thing though, I am noticing that the first item is acting strange. It is not a link like it should be (it the hover effect is not working on the first item ONLY) and when you try to inspect the element it shows the wrong element. It’s not the div itself it happens to whichever item is in the very first position in the magnet. Any ideas here? http://smmcnyc.com/work/smmc/smmc1306/about-clients.php

What’s happening is that items are hidden in the initial position, this is it, in the first item position. This items lay above the first item and when you’re trying to hover first item, what you’re really doing is hovering the last of this hidden items.

This is a z-index issue, try to add a negative z-index to ’.magnet-hidden’ in the css. This is the default class hidden items have.

Hope this helps!.

Worked! Thank you!! :)

I am using this for a photo gallery. I have tried using the following initialisations

$(document).on(‘ready’, function() { $(’#container’).magnet({ layoutMode: ‘masonry’, }) });


$(window).load(function() { $(’#container’).magnet(); });

in addition, using the following methods to display the images..

<img class=”magnet-item” src=”pathtoimage” />


<div class=”magnet-item”> <img src=”pathtoimage” /> <div>

in both instances (and combinations thereof, the images render square. All the images are of different ratios, but are all 250px on the longest edge.

One other thing. If I define the image dimensions, there are large gaps in masonry mode and uneven in row mode. < img class=”magnet-item” src=”pathtoimage” alt=”” style=”width:Xpx; height:Xpx” />

Any thoughts or suggestions?

Many Thanks in advance


When using images, it’s best to use $(window).load event to ensure that images have finished loading when calling the plugin, as in this case.

The plugin get the size from the images to work, doesn’t use a fixed size to layout items, so there must be an error elsewhere, not in the call.

The large gaps are probably caused by the first issue or images not being of proportional sizes. If the plugin doesn’t get correct sizes, white gaps may appear. The plugin takes first item as reference for a row height using masonry. If the sizes aren’t proportional between images, this may cause the gaps. Try to use ‘tiled’ instead of ‘masonry’ cause it use a different logic to fill rows and get rid of the gaps.

Anyway, can you provide a link and/or images to see what’s happening?


a presales question:

there is any way to have a cumulative filter (AND logic)?

thank you

If by cumulative filters you mean 2 or 3 working filters, yes it’s possible. I was asked before, you must use a mix of jQuery and plugin methods (show & hide) to make it work.

Hi !

I am thinking of buying the plugin, but have one concern.

Is it possible to evenly distribute items for each row? Even on your demo, the items are left aligned, and empty space can be seen at the right side of the wrapper container.

For example, I want four items in a 1280px row, I would like them to be horizontally centered. Hope you get what I mean :)


I can confirm that something is wrong, yes, by using rows method it switches to column mode, haven’t tried the column method with firebug.

After some testing, I think these methods are switched. Have to test it further and update the plugin if this is confirmed, within this week.

I’ve been testing this two layout modes further and there perform as intended. It was just a misunderstood of how they are supposed to perform. When using this layout modes, you pass an argument that indicates to the plugin how many items do you want per row or per column, not how many rows or columns do you want. This can be confusing as this time was, maybe changes in the next big update with a code refactoring. Still no timetable for this though.

Is this compatible with WordPress?

Yes, you can use it with wordpress. Just use wp_enqueue() to add it as you would do with any js file.

In the page where you are using the plugin, just be sure to keep the same html structure explained in the docs when querying for posts.

Hi, There is the possibility to use filters in a dependent way, so to be able to filter a result already filtered.

I have two groups of buttons to filter the items by “Recipient” or “Age” but I’d like to be able to filter the items by Age after having already filtered the Recipients.

I’m not very practical of javascript so if it possible to do can you tell me how? This is my situation:

<div class="magnet-filter"> <div class="box-left"> <p>Filter by RECIPIENT</p> <button class="pulsante-filtro pulsante-filtro-blu" data-filter="*">All</button> <button class="pulsante-filtro pulsante-filtro-blu" data-filter="girl">Girls</button> <button class="pulsante-filtro pulsante-filtro-blu" data-filter="boy">Boys</button> <button class="pulsante-filtro pulsante-filtro-blu" data-filter="adult">Adults</button> </div> <div class="box-right"> <p>Filter by AGE</p> <button class="pulsante-filtro pulsante-filtro-blu" data-filter="0+">0+ age</button> <button class="pulsante-filtro pulsante-filtro-blu" data-filter="1+">1+ age</button> <button class="pulsante-filtro pulsante-filtro-blu" data-filter="3+">3+ age</button> <button class="pulsante-filtro pulsante-filtro-blu" data-filter="5+">5+ age</button> </div> </div>

Let me know.

Thanks, Massimo


I guess what you are asking is for a double filter. Yes, it’s possible to do but you need to use jQuery and plugin methods to make it work.

Please, send an email using provided address on support so I can send you a working example.

I sent you a request of support.

Hi, i try use one filter as default, but don’t load the items, if use all (*) by default load the items without problem, i tried in different ways, same result, can help me?, thanks.

$(document).on(“ready”, function() { $(”#container”).magnet({ filter: ”.school” }); });


I checked out, you must use the option without the dot:

$(document).on('ready', function() { $('#container').magnet({ filter: 'school' }); });

Let me know if worked to correct the documentation.


Hi, works perfectly without the dot, thanks.

Glad to be helpful.

Documentation has been corrected for future reference.

Regards, Haundo Design


axxe16 Purchased

can i use lazy image loading for large image gallery?

Yes, you can. In the javascript file, just initialize the plugin as a callback function on image loading initialization. Should look something like this:

var $container = $('#container'); $container.imagesLoaded( function(){ $container.magnet({ // options... }); });

the demo not work

My apologies. The website is moving to a new server and this process could take up to a week or so according to the hosting company. Please be patient until the process is completed. Hope you to visit the webpage again once is back live.

Website is live again. Thank you for your patience.

I sent you a support request using the support form. Thanks again for creating this neat code!

Pre purchase Question. Will this work on Wordpress?

Yes, it works on WordPress. Just use wp_enqueue() in your functions.php to add it as you would do with any js file.

In the page where you are using the plugin, just be sure to keep the same HTML structure explained in the docs when querying for posts.

Also, you need to initialize the plugin at some point with javascript too.

If you have more questions about it, please don’t hesitate to ask again.

Hi, pre purchase question. Can you make the filters on the left hand side rather than above the grid? I would like a vertical filter menu on the left hand side of the grid for a portfolio grid.

Hi, filters can be positioned wherever you want. Items don’t depend on where the filters are positioned, they depend on the classes they have to show or hide and if this classes match or not in the filters. You just have to be sure to wrap items in to a container, then initialize the plugin selecting that container. You can check the docs for a further explanation: http://docs.haundodesign.com/magnet/getting-started/#installation.

If you have any more questions, pre or post purchase I’ll be happy to answer.