How to add anchor-based URL navigation to jQuery masonry

Question

Hello I'm looking for a way to add anchor-based URL navigation to jQuery masonry..

Here's the example: http://desandro.com/demo/masonry/filtering.html

I'm trying to be able to direct people straight to a filterable class (ie: ../filtering.html#red)

Seems like there should be an easy solution but I'm a Javanoob so I would really appreciate some help! Thanks!

Answer 1

In addition to the code on that page (after it, still in document.ready) you could do this:

$("#filtering-nav a[href='" + location.hash + "']").click();

This just performs a click on the <a href="#red"> when you go to page.htm#red for example.

Or, if you want them immediately hidden, do this:

var myClass = location.hash.replace('#','.');
$("#primary").children().not(myClass).addClass('invis').hide();
$('#primary').masonry();

This doesn't require the filtering buttons, it just hides anything not matching the class in the hash, like this: page.htm#classToShow.