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.

27 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