Similar to a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, the following example shows how you can create a simple photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
global {
modal-transparency: 0.9;
modal-transparency-color: white;
modal-transparency-blur: 9;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.effects.Resize;
import mx.events.ResizeEvent;
import mx.events.ListEvent;
import mx.controls.Image;
import mx.events.ItemClickEvent;
import mx.managers.PopUpManager;
private var img:Image;
private function tileList_itemClick(evt:ListEvent):void {
img = new Image();
// img.width = 300;
// img.height = 300;
img.maintainAspectRatio = true;
img.addEventListener(Event.COMPLETE, image_complete);
img.addEventListener(ResizeEvent.RESIZE, image_resize);
img.addEventListener(MouseEvent.CLICK, image_click);
img.source = evt.itemRenderer.data.@fullImage;
img.setStyle("addedEffect", image_addedEffect);
img.setStyle("removedEffect", image_removedEffect);
PopUpManager.addPopUp(img, this, true);
}
private function image_click(evt:MouseEvent):void {
PopUpManager.removePopUp(evt.currentTarget as Image);
}
private function image_resize(evt:ResizeEvent):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
private function image_complete(evt:Event):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
]]>
</mx:Script>
<mx:WipeDown id="image_addedEffect" startDelay="100" />
<mx:Parallel id="image_removedEffect">
<mx:Zoom />
<mx:Fade />
</mx:Parallel>
<mx:XML id="xml" source="gallery.xml" />
<mx:XMLListCollection id="xmlListColl" source="{xml.image}" />
<mx:TileList id="tileList"
dataProvider="{xmlListColl}"
itemRenderer="CustomItemRenderer"
columnCount="4"
columnWidth="125"
rowCount="2"
rowHeight="100"
themeColor="haloSilver"
verticalScrollPolicy="on"
itemClick="tileList_itemClick(event);" />
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalAlign="middle">
<mx:Image source="{data.@thumbnailImage}" />
<mx:Label text="{data.@title}" />
</mx:VBox>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<gallery>
<image title="Flex"
thumbnailImage="assets/fx_appicon-tn.gif"
fullImage="assets/fx_appicon.jpg" />
<image title="Flash"
thumbnailImage="assets/fl_appicon-tn.gif"
fullImage="assets/fl_appicon.jpg" />
<image title="Illustrator"
thumbnailImage="assets/ai_appicon-tn.gif"
fullImage="assets/ai_appicon.jpg" />
<image title="Dreamweaver"
thumbnailImage="assets/dw_appicon-tn.gif"
fullImage="assets/dw_appicon.jpg" />
<image title="ColdFusion"
thumbnailImage="assets/cf_appicon-tn.gif"
fullImage="assets/cf_appicon.jpg" />
<image title="Flash Player"
thumbnailImage="assets/fl_player_appicon-tn.gif"
fullImage="assets/fl_player_appicon.jpg" />
<image title="Fireworks"
thumbnailImage="assets/fw_appicon-tn.gif"
fullImage="assets/fw_appicon.jpg" />
<image title="Lightroom"
thumbnailImage="assets/lr_appicon-tn.gif"
fullImage="assets/lr_appicon.jpg" />
<image title="Photoshop"
thumbnailImage="assets/ps_appicon-tn.gif"
fullImage="assets/ps_appicon.jpg" />
</gallery>
View source is enabled in the following example.



{ 21 comments… read them below or add one }
Hi, first – your gallery is great! I little tune up code for my gallery and it look beautiful.
But, i’ve read all comments, especially from Herman, because i also want to add prev/next buttons to popup.
As far, no result… Can you give me any idea how to do that?
Is there anyway to prevent the image redraw when you scroll? It has a serious lag on it that I’ve noticed with this type of list component. It would be nice if you could cache the image somehow so the flex app doesn’t have to redraw it when you scroll the list
@Bart,
See Ely Greenfield’s SuperImage example, “Some thoughts on Flex vs. HTML (or…’how I made my Flex List Images stop flickering.’)”, on QuietlyScheming.com.
Peter
how can we scroll images in tilelist slowly,
abhishekchess1@gmail.com
This is great… thanks for the help!
First, I want to say thanks for this wonderful example! It has helped me out a great deal. Next, to know if you could explain how to add text to the function that brings in the fullImage? For example, in the xml file if there is a node called “description” how can data be brought into the item renderer via data.@description ?
thanks peter, for this nice gallery.
it really helped me a lot.
but, is there any possibility to change the itemClick event to a keyDown ?
when i use keyDown instead of itemClick there is a problem with the parameter throwed because the itemClick event throws a ListEvent,
but the keyDown does not. i mean of course because its only keyDown and not itemKeyDown.. but i still dont know how to fix this.
any idea?
can someone other help me?
thanks alot so far (:
martin
@Martin,
Instead of this:
Try this:
Not sure if that will work completely since the code tries to access
img.source = evt.itemRenderer.data.@fullImage;in that event handler, so you may need to tweak it slightly to get the full image source.Peter
well, with only changing the ListEvent to Event it wont work because a normal Event type has no .itemRenderer method. am I right?
I really have no idea how to get the selected item without reading it out through event.itemRenderer.data
@Martin,
Sorry, I don’t have time to verify right now, but maybe try changing this:
To this:
img.source = tileList.selectedItem.@fullImage;Peter
oh my god, yes of course..
it works.
thanks peter !
Thank you for this sample code.. I am using the Flex Application and am not sure where to put all of these files to make this project run… any chance some one might not mind documenting where to put each piece for example CustomRenderMxml…. where do take the text and save it… whats the path…
@Don,
If you view the source code for the SWF (http://blog.flexexamples.com/wp-content/uploads/TileList_itemClick_test/bin/srcview/index.html), you should see a “Download source (ZIP, 134K)” in the lower, left hand corner. You should be able to download the ZIP file and import it into your Flex Builder 3/Flash Builder 4 and run the application from there.
Peter
Hello Every1,
Does anyone know how to make turn the the thumbnail image into a web URL from the xml file ?
for example if there’s a tag http://www.adobeflex.com for the flex image
hope someone can help me out on this one!
Do you the best way to convert an image into a thumbnail dynamically? Also I am trying to convert from other formats such as .psd.
@bridget,
I don’t know about .PSD files specifically, but ColdFusion has some image manipulation capabilities and can resize images quite nicely. I’m pretty sure you can also look into ImageMagick which is a great image library, which I believe supports .PSD files.
Heey Peter,
i’m trying to reconstruct your Gallery in an Air application.
But doing that, it doesnt recognize CustomItemRenderer.mxml.
1172: Definition CustomItemRenderer could not be found. PortfolioRypens/src/be/Rypens/PortfolioRypens/model/views cmpGallery.mxml
Any idea?
Hi
its nice. but it contain lot problem .actually am give image name through xml. i have 10 xml and am already load and give data to tile list using combo its not work perfectly .some time some images are missed . i dont know wat to do… pls help
I have the same problem! Please help!!
I often get some error when I try to open and close all of the images sequentially using your code: more precisely, when I click on a thumb I can’t get the popup! The program seems to be idle.. Then I refresh the page and I’m able to open/close some pic but it comes again the bug! Any suggestion?
RangeError: Error #2006
The same problem! help pls!