Filter Portfolio Gallery

Demo: Preview: Downloads: 81

Last update (4):Wed, May 12th 2010, 00:00

$18

This is a gallery with filters, on two levels. You can sort for example your projects by clients, and then by project type, your products by colors and then by size, your products by model and then by material, or however you need. One level filtering is also implemented.

This component is built from three of our Flabell components:

Multipage Thumbnail Gallery
Horizontal Image Banner Rotator with thumbs
CheckBox Component

So if you own any of these components, you will find the XML familiar.
You can customize each component with the same features.

The main level in this example are the cars, and the class is the second level.

You could for example add your portfolio for Corporate, Agencies and Personal clients, and sort these by the work done for them, such as Branding, Websites, Interactive, etc. Multiple second levels filters work as well. For example, for one client you can add both Branding and Websites, as in our example.

If you decide to use only one filtering level, the one you need to keep is the type (the main level).

Alberto Torres

on 11/5/10

Ok, thanks, I wait.

Andrei Potorac

on 12/5/10

File update 04:

- in this update we added several new options in the XML, including displayFilters in portfolio.xml and strokeThickness in gallery.xml

- bug fixed related to filtering items, when a type or a filter was initially unselected

- we added the much requested navigation to the smaller thumbs in the gallery

- we added tooltip for displaying the current number of the thumb

rupert hawkes

on 13/5/10

The strokeThickness doesn't work quite as expected. For example I have it set to 1 but it's much thicker than that. It seems that if the images are quite small the thickness of the stroke is thicker too. See here:

www.boiledsweets.com/music/guitars

It doesn't bother me as I want a thicker stroke but it is a bug.

Andrei Potorac

on 13/5/10

It's not a bug, it's a feature. Please make sure you use the images at the appropriate size. :)

Andrei Potorac

on 13/5/10

By that I mean a bit bigger than the area where you display them, so that the ken burns resize effect still applies.

navin talawant

on 19/5/10

I am trying to use just the "Filter by Brand".
I removed the following and it does not work.

                	
	<filter title = "Filter by Type:" titleColor = "0x236FBA" textColor = "0x000000">
		<item color = "0xffffff" isSelected = "true">Coupe</item>
		<item color  = "0xffffff" isSelected = "true">Limousine</item>
		<item color = "0xffffff" isSelected = "true">4x4</item>
		<item color = "0xffffff" isSelected = "true">SUV</item>
		<item color = "0xffffff" isSelected = "true">Cabrio</item>
	</filter>

Andrei Potorac

on 20/5/10

You need to remove the items only, not the entire nod.

Greg Kerstin

on 23/6/10

I'm having a gap issue between pagination of 9 & 10. Please preview here. http://tiny.cc/hf628

Thanks for the great work!

Andrei Potorac

on 24/6/10

This is strange. Can you email us all your files at support please? A link to a zip would help, so that we can check and see what's wrong.

8 7 6...1

Try before you buy

Not sure if you need this component?

Download the free preview and customize it for your project before you purchase it.

Or try our demos.

Note: You can test the preview only on your computer.