BTW, I am having one small problem with your code. With the paging put in, after I jump to another page and then choose another category, it seems like the filter is only limited to the last shown items on the page.

Is there any way to reset items when the category is selected?

Thanks in advance!

- Kc

I notice alot of people are getting hung up on the fact that when you click the filters in the gallery it takes you to the top of the page. This is simply because the links the filters are wrapped in all point to a href="#". href=”#” is just a placeholder, which points to an id (attributed with the “#” pound symbol) that doesn’t exist, so it just takes you back to the top of the html document. You can do a couple of things to resolve this easily:

1. Add an anchor (with nothing inside of it, so it won’t take up any space on the page) to your page at the top of your gallery so it will point users there when they click the filters. ie. create the anchor with the ‘name’ or ‘id’ attribute a name="myGalleryTop"></a (hint, Name and ID must be the same if you use both, but both are not required) and then have all the links which wrap the filters point to a href="#myGalleryTop"

2. Remove the href attribute from the anchors wrapping the filters. When clicked, they will still filter your gallery by running the javascript attached, however they won’t take you anywhere within your html document. The caveat here is that browsers will no longer read the anchors as links, just plain text, so it won’t show a “pointer cursor” when a user mouses over it like a normal text link. To fix this, just use CSS to style the anchors wrapping the filters. ie. #myGalleryTop { cursor: pointer; }

There’s one other issue I noticed which seems common in this forum, and I also ran into myself – It can be a little troublesome clicking on the items in the gallery once they’ve been filtered. The first gallery item is hard to click on and sometimes you can still click links to gallery items which should not appear as a part of the filter. The reason for this is because the javascript is setup to make the filtered gallery results hidden (using the 0 opacity trick), but still displayed and taking up space. This can cause errors when trying to click the correct items in the gallery after filtering the results. There’s a simple fix for this as well, you just need to change the javascript so that the items which are filtered out change their opacity value to ‘hide’ instead of 0.

Replace:
$('.item li[rel!='+thisItem+']').stop()
.animate({'width' : 0,
'opacity' : 0,

With:
$('.item li[rel!='+thisItem+']').stop()
.animate({'width' : 0,
'opacity' : 'hide',


and you shouldn’t have any more issues clicking your gallery items. Good luck all and thanks again to Hidayat for sharing!

You can create an anchor with a unique id (ie. “galleryTop”) at the top of your gallery (wherever you have it placed on your page) and change the filters links to point to it a href="#galleryTop"

Or, you can take out the href="#" altogether and the filters will still work with the javascript. The only catch here is that it won’t appear visually as a link to the user (ie. the Cursor doesn’t change because it no longer thinks the anchor is a link, it just recognizes it as text). This can be easily fixed by adding CSS style to the div containing the filters – cursor: pointer;.

Good luck!