Filter Portfolio Gallery

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).

 

rupert hawkes

on 16/4/10

 

All XMLs validate now.

What do you mean about the image size? I thought it would resize them.

 

Andrei Potorac

on 16/4/10

It resizes the thumbs on the banner, not the images on the main screen. These need to be a bit larger for the zoom effect to be visible.

 

rupert hawkes

on 16/4/10

 

That part is OK. Also I now understand what the scrollbar is, it's for when you have too many text on the right.

But I stiull need a way to scroll through the thumbnails, please click on the first guitar and see what I mean.

 

Andrei Potorac

on 16/4/10

Sorry, but there's no way for scrolling the thumbs, other then selecting the last/first image.

 

rupert hawkes

on 16/4/10

 

Cannot we have a "page" type thing like the initial gallery as it looks really horrid having half images and no way to scroll through them. It really means you are limited to say 8 images! :-(

 

Andrei Potorac

on 16/4/10

No, you can add as many images as you want. In order to navigate, when you reach the last image, it shows the next image.

 

rupert hawkes

on 16/4/10

 

Hmm :-(

Is there anyway to add pagination? Would be MUCH nicer!

 

Andrei Potorac

on 16/4/10

Only as custom work. That's not something we plan to add for this product, because we find it does what we need in it's current form.

 

rupert hawkes

on 16/4/10

 

Or even arrows either end

 

Andrei Potorac

on 11/5/10

Ok, let me see what I can do.

 

rupert hawkes

on 16/4/10

 

Two more bugs...

1. Select the first guitar and look at the thumbnails, some of them don't have the stroke drawn at the top.

2. Click on the thumbnails quickly, the main image is screwy as some pictures are drawn over others, i.e. you can see part of one image behind another.

Two enhancements...

1. Could we please have a thin border (stroke) around the main gallery images and the main image in the sub image galleries?

2. How much would it cost to have a way to scroll through the thumbnails?

 

Andrei Potorac

on 19/4/10

Please get in touch for a quote, we'll look into the other issues you mentioned. You are using the latest update?

 

Andrei Potorac

on 11/5/10

Note that in order to have the stroke at the top, you need to allow for enough space on height for the thumbnails in the XML file.

Regarding some parts of the images being drawn on top of the other, is something related to the Flash Player version you have. It looks like it's showing pixels under the loader for example. I'll check and see if we can do a trick to hide this issue from the player.

 

rupert hawkes

on 16/4/10

 

Another bug...

http://www.boiledsweets.com/music/guit...

Look at the "Little Silver" image in the main view, it's the one on the bottom row, second column. The "Current" text is not white. This is wrong.

 

Andrei Potorac

on 19/4/10

I'll look into this, thanks.

 

dublin2111

on 27/4/10

 

hi how can i swap the fillter by type and filter by brand around, i want to swap their positons - where can i access this please - is this done in the original source file

 

Andrei Potorac

on 27/4/10

Yep, you can do that only by editing the code. You must be somewhat familiar with AS3 and Flash to do that.

It's all code based, and you need to edit the place where the elements are positioned.

 

dublin2111

on 27/4/10

 

ok i am familiar with flash - but if you could provide me the locations and the code i must look out for - i love this filter, but simply change the positions - can you assist me please i would really appreciate it

 

Andrei Potorac

on 27/4/10

Sure. Check inside Portfolio.as, where you have the following lines of code:

                
mcGroup.mcAll.y = offsetFilter;
mcGroup.mcType.y = mcGroup.mcAll.y + mcGroup.mcAll.height + offsetFilter;
mcGroup.mcFilter.y = mcGroup.mcType.y + mcGroup.mcType.h + offsetFilter;

                

 

dublin2111

on 27/4/10

 

yes i have located the file are you able to provide me the code to swap them around or what i need to - sorry to be a pain - i am desperate to get this completed for my daughters project and then it is complete....thanks cheryl

 

Andrei Potorac

on 27/4/10

It's very easy:

                
mcGroup.mcAll.y = offsetFilter;
mcGroup.mcFilter.y = mcGroup.mcAll.y + mcGroup.mcAll.height + offsetFilter;
mcGroup.mcType.y = mcGroup.mcFilter.y + mcGroup.mcFilter.h + offsetFilter;

                

10...87654...1

Post a comment

Please login to join the discussions. Don't have an account? Register (it takes 30 seconds)

There are currently no frequent asked questions. As soon as we receive your feedback, we'll update this section permanently.

There are no video tutorials for this flash component yet.

Filter Portfolio Gallery - change log

Update 04 - 12 May 2010

- 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

Update 03 - 15 April 2010

- bugs fixed (related to how the pagination was displaying)
- scroll added for displaying more text than it fits in the window
- optional colors were added for the filters titles
- stroke thickness can now be controlled from the XML
- the way the images load in the final slideshow has been improved (loader fades out, images fade in if loaded the first time, otherwise they appear instantly)

There is currently no additional help provided for this flash component.