Filter Portfolio Gallery

I created exactly the same folder structure on my computer and changed the paths properly.

This would be the script tags you should use in the HTML file:

                
<script type="text/javascript" src="../js/swfobject.js"></script>
        <!-- <script type="text/javascript" src="js/swfmacmousewheel.js"></script> -->
		
		<script type="text/javascript">

			// JAVASCRIPT VARS
			// cache buster
			var cacheBuster = "?t=" + Date.parse(new Date());		
			
			// stage dimensions
			// if you define '100%' then the swf will have the browser dimensions
			var stageW = "965"; // 100%
			var stageH = "390"; // 100%

			//var stageW = "100%";
			//var stageH = "100%";
			
			
			// ATTRIBUTES
		    var attributes = {};
		    attributes.id = 'FlabellComponent';
		    attributes.name = attributes.id;
		    
			// PARAMS
			var params = {};
			params.bgcolor = "#ffffff";
			params.wmode = "transparent";

		    /* FLASH VARS */
			var flashvars = {};				
				
			/// if commented / delete these lines, the component will take the stage dimensions defined 
			/// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml			
			flashvars.componentWidth = stageW;
			flashvars.componentHeight = stageH;
			
			/// path to the content folder(where the xml files, images or video are nested)
			/// if you want to use absolute paths(like "http://domain.com/images/....") then leave it empty("")
			
			flashvars.pathToFiles = "../";
			flashvars.xmlPath = "xml/portfolio.xml";
			flashvars.xmlPathGallery = "xml/gallery.xml";
			flashvars.xmlPathBanner = "xml/banner.xml";
			
			/** EMBED THE SWF**/
			swfobject.embedSWF("../flash/filter_gallery/preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "../flash/filter_gallery/expressInstall.swf", flashvars, params);
			//if(swfmacmousewheel) swfmacmousewheel.registerObject(attributes.id);
			
		</script>

                

I assumed that you'll embed the component in your filter.html file. This is where you'll put this code.

Also, note that every path to every file in our components are "calculated" like this: pathToFiles + xmlPath. For the images the paths will be like this: pathToFiles + pathToTheImage. It's a concatenation between the pathToFiles and the other resource. So you should change the images' paths in the portfolio.xml file, like this:

                
<thumb>flash/filter_gallery/images/main-sklasse.jpg</thumb>

<!-- and -->

<item>
    <thumb>flash/filter_gallery/images/thumbs/sklasse-1.jpg</thumb>
    <image>flash/filter_gallery/images/originals/sklasse-1.jpg</image>
    <link></link>
    <target>_blank</target>
</item>

                

I tried this and it worked. I hope it will on your page too.

You're welcome. Enjoy!

Hi,

The demo will not work on a public website. It was built not to. It works just on your local machine. You'll have to upload the component you downloaded after you bought the product. If you did so. If not, please download using the big button on the right side of the component preview.

Use the preview.swf file you receive in that archive.

Ok, I'm glad you found the solution. If you experience any other issues, please don't hesitate to contact us.

Another update is completed.

The text that's showing what filter has each item assigned will now display on multiple lines. You'll just have to adjust the thumbsTextBackHeight property in the gallery.xml file.

So if you have multiple filters assigned to a item and they don't fit under the width of each preview image in the gallery, that issue is now fixed. Just download the new files.

Hi,

Do you mean you just edited this line? :

                
<type title = "Filter by Brand:" titleColor = "0x236FBA" textColor = "0x000000">
		<item color = "0xF5531A" isSelected = "true">BMW</item>

                

In there you'll just define the filter. After you defined it, you'll need to assign that filter to some items in the same portfolio.xml file. So you'll need to rename the BMW in the <b>type</b> xml tag too:

                
<portfolio>
		<project>
			<title>BMW 3 series</title>
			<type>BMW</type>
			<filter>Coupe</filter>

                

The type tag assigns the first filter and the filter tag assigns the second filter.

So what you'll have to do is to rename every other BMW type tags also.

OK, I am thinking of making this purchase (Filter Gallery), however I have a few questions before I go ahead.

I have created a mock-up of the interface I would like to have. Here it is
http://www.pixelfiesta.in/files/03 - works 1.jpg
http://www.pixelfiesta.in/files/03 - works 2.jpg

My questions are:
1) Can I add one more 'show all' check box? (see JPG)
2) Can I change the arrows that are provided?
3) Can I change the fonts used in FLash file? Can I change linespacing, character spacing?
4) Can I change the size overall and also the sizes of each element? eg. Preview pane inside
5) Can I change the tickmark shape, colour, position etc?

Can it be customised to this extend?

I am not a flash pro, so upto what extent can I expect support on this component?

Is there a email ID I can write to?

Hi,

I looked on your mock-ups and these would be the answers to your questions:

1) The way this component is built, it doesn't have a "Show All" check box. The flash project would need to be modified a little to add this feature.

2) Yes, you can change them by opening the FLA file and changing the shapes, but I don't recommend it since you don't have great experience using Flash.

3) Yes, this tutorial explains how to change the font:

http://www.flabell.com/blog/668/embedd...

Changing the line spacing, character spacing also involves modifying some text fields in the FLA file.

4)You can change the overall size for the component, but not for every element inside it. For example you can change the size for the images you display, but not for the arrows. Check out the XML files and you'll figure what sizes you can customize.

5) Again, you can do this by changing the flash project, but involves a little flash knowledge.

For support you can send us emails at support@flabell.com.

We can give you support with changing the arrows, changing the fonts, line spacing and character spacing. Also we could assist you, if you want some elements resized.

If you want other changes, our team can help you by doing custom work. If you're interested, send us an email at office@vuzum.com. We'll implement any modification you need.

I have now purchased the component Filter Portfolio Gallery and have mailed you for support!

Ok. Thank you. I replied to the email a moment ago.

We're sorry, but, no, at this moment, we don't have a manual for the component or a specific tutorial for it.

However, we tried to name the XML elements as self-explanatory as possible. If you don't know what some property will change, you can change it's value, refresh the webpage that contains the component and see the result. You can always go back to the old value, if you don't like it.

Also, I can explain what some property does, if you can't figure it out.

Hi,

That's the way the component was built. It will not rotate the images once you click on the thumb.

If you need this behavior to change, please send our team an email at info@vuzum.com. We'd be glad to help you by doing a little custom work.

Really? So if someone decides to view a folder of 50 photos and clicks on a thumb nail, they're stuck on that photo and have to go back to the filter and start again? I'm having a hard time understanding why that would be done on purpose.

I don't think this would cause problems when you have more images. It's just a preference we had at the time, to stop the slideshow after the user clicks on a picture.

The slideshow still goes one picture at a time and if you have 50 picture and you want to go faster on the last picture, you'll still have to navigate to it.

We made an update anyway and introduced an option in the banner.xml file:

                
stopSlideshowAfterClick="false"

                

If you set it to "true", the slideshow will stop when the user clicks on a thumbnail.

I hope I understood the problem correctly.

I think you understood it correctly. What I'm looking for is the opposite. So if someone clicks on the thumbnail, it'll pause on the picture, then resume the slideshow. So do I need to download the whole component again for the update? Or do I just add this line to existing banner?

You'll have to download the files one more time and use the new preview.swf file. You'll need to copy the property above in your banner.xml file also.