This request comes to us from a faithful reader who was wondering how you can display a full image when a user clicks on a thumbnail in a HorizontalList control in Flex. My solution was to put the thumbnail image and full image URLs in the data provider and then use bindings to the HorizontalList control’s selectedItem property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-horizontallist-control/ --> <mx:Application name="HorizontalList_selectedItem_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="Flex" thumbnailImage="assets/fx_appicon-tn.gif" fullImage="assets/fx_appicon.jpg" /> <mx:Object label="Flash" thumbnailImage="assets/fl_appicon-tn.gif" fullImage="assets/fl_appicon.jpg" /> <mx:Object label="Illustrator" thumbnailImage="assets/ai_appicon-tn.gif" fullImage="assets/ai_appicon.jpg" /> <mx:Object label="Dreamweaver" thumbnailImage="assets/dw_appicon-tn.gif" fullImage="assets/dw_appicon.jpg" /> <mx:Object label="ColdFusion" thumbnailImage="assets/cf_appicon-tn.gif" fullImage="assets/cf_appicon.jpg" /> <mx:Object label="Flash Player" thumbnailImage="assets/fl_player_appicon-tn.gif" fullImage="assets/fl_player_appicon.jpg" /> <mx:Object label="Fireworks" thumbnailImage="assets/fw_appicon-tn.gif" fullImage="assets/fw_appicon.jpg" /> <mx:Object label="Lightroom" thumbnailImage="assets/lr_appicon-tn.gif" fullImage="assets/lr_appicon.jpg" /> <mx:Object label="Photoshop" thumbnailImage="assets/ps_appicon-tn.gif" fullImage="assets/ps_appicon.jpg" /> </mx:Array> <mx:Panel title="{horizontalList.selectedItem.label}" height="100%" horizontalAlign="center"> <mx:Image id="img" source="{horizontalList.selectedItem.fullImage}" maintainAspectRatio="true" horizontalAlign="center" width="{horizontalList.width}" height="100%" /> <mx:ControlBar horizontalAlign="center"> <mx:HorizontalList id="horizontalList" labelField="label" iconField="thumbnailImage" dataProvider="{arr}" itemRenderer="CustomItemRenderer" columnCount="4" columnWidth="125" rowCount="1" rowHeight="100" horizontalScrollPolicy="on" /> </mx:ControlBar> </mx:Panel> </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-horizontallist-control/ --> <mx:VBox name="CustomItemRenderer" xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle"> <mx:Image source="{data.thumbnailImage}" /> <mx:Label text="{data.label}" /> </mx:VBox>
View source is enabled in the following example.

{ 69 comments… read them below or add one }
← Previous Comments
hi,
i have tested your code also with Flex 3 Builder and SDK flex_sdk_3.4.0.6955
in this version i get also the binding warning
warning: unable to bind to property ‘label’ on class ‘Object’ (class is not an IEventDispatcher)
warning: unable to bind to property ‘thumbnailImage’ on class ‘Object’ (class is not an IEventDispatcher)
do you have an idear what is going wrong here ???
I notice that everytime you scroll the component keeps loading in images. I understand that this is probably due to itemrenderer recycling, but surely there is a way to cache the images.
@Neil,
Check out Ely Greenfield’s SuperImage component; “Some thoughts on Flex vs. HTML (or… ‘how I made my Flex List Images stop flickering.’)”.
Peter
I was having problems with this too when following the example code in the CustomItemRenderer. However, after I downloaded the source code, I noticed the “name” property was missing in the source code. I removed the “name” property from my version and the compiled swf works beautifully. Please correct the example code to match the downloadable source code for others who are surely experiencing problems as well.
Thank you for an otherwise good example here.
I didn’t try to copy this code letter for letter, rather I just used it as a guide as I’m new to flex, so it worked for me. However, what I really wanted to do was load images dynamically from a foreign rather than bundle them in with the app.
Here is how I did it
First I created a bindable ArrayCollection called images and set it as the data provider for my HorizontalList which looked like this:
Then I made a function to add an image to the list which looked like this:
This way is nice if youre lazy because you dont need to describe a custom ItemRenderer, and, as I said before, you dont need to bundle the images you want with the app
I have copied this code by the letter and only swapped out my own images. I have three images and my issue is that my first two images don’t “select” properly, until I select the third image. After selecting the third I can select either one or two correctly, but they don’t work in any other order.
@vicki,
Doesn’t sound like a known issue. If you think it is a bug, can you please file a bug report at http://bugs.adobe.com/flex/?
Thanks,
Peter
Hi – I had the same result as vicki. Copied the code, changed the array to include my own images/labels (just 4). Only the 4th image can be selected initially. After selecting the 4th i can select any of the other images. In other words, it appears to be necessary to select the last (4th) image in order to ‘reset’ the module so another image can be selected.
Mike, any luck yet? I’m a newbie and don’t feel confident sending it as a bug :) Not quite sure what to report.
how to display images from a database?
can you help me??
thx a lot.. ^^
Very usefull ! thank u!
I need one more thing to do with this picture gallery :D , and I don’t know how to do it..please help!
When u first laod this flex , I want that the first picture to be loaded as big size! Flex logo big size to be loaded at first step. It is kind of emty at first sight!
Thank U very much!
@Viorel,
Try setting the
selectedIndexproperty to 0 in the HorizontalList.Peter
Thank U very much!
It is working!
Nice tutorial :-)
I however have a question. How to proceed to autoload the first picture? I don’t find exemples. I suppose I have to use actionscript but I need a how-to.
It’s probably important I don’t use an array but a xml for pictures datas ;-)
Thank for anyone who can help.
@Xephres,
Set the
selectedIndexproperty on the HorizontalList control to 0 (zero).Peter
Wow, so easy?
Nice, it works ^ ^
Thanks :-)
Hi,
I am java developer and i need to develop a web page with image viewer content like your flex plug-in. However, i do not know how to applied it to my web page by JSP. Can anyone have experiences on this problems.
Thanks so much.
← Previous Comments