Creating a simple image gallery with the Flex HorizontalList control

by Peter deHaan on February 15, 2008

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.

View MXML

<?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>

View CustomItemRenderer.mxml

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

Tagged as: columnCount, columnWidth, iconField, itemRenderer

{ 69 comments… read them below or add one }

← Previous Comments

1 Roland August 20, 2009 at 12:59 am

2 Roland August 20, 2009 at 4:03 am

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 ???

3 Neil September 28, 2009 at 7:27 am

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.

4 Peter deHaan September 28, 2009 at 7:39 am: @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

Reply

5 Craig Lund September 28, 2009 at 9:29 am

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.

6 Dane October 22, 2009 at 6:29 am

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:

<mx:HorizontalList id="hlImages"
	labelField="source"
	itemRenderer="mx.controls.Image"
	columnWidth="200"
	dataProvider="{ images }"
	rowCount="1"
	horizontalScrollPolicy="on"
></mx:HorizontalList>

Then I made a function to add an image to the list which looked like this:

public function addImage(item:String):void
{
    var o:Image = new Image();
    o.source = "yourdomain.com/" + item;
    images.addItem(o);
}

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

7 vicki November 6, 2009 at 10:21 am

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.

8 Peter deHaan November 6, 2009 at 12:39 pm

@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

9 Mike November 7, 2009 at 11:10 am

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.

10 vicki November 12, 2009 at 3:59 pm: Mike, any luck yet? I’m a newbie and don’t feel confident sending it as a bug :) Not quite sure what to report.

11 DanSu December 1, 2009 at 10:10 am

how to display images from a database?
can you help me??

thx a lot.. ^^

12 Viorel January 5, 2010 at 4:14 am

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!

13 Peter deHaan January 5, 2010 at 7:55 am

@Viorel,

Try setting the selectedIndex property to 0 in the HorizontalList.

Peter

14 Viorel January 7, 2010 at 2:03 pm: Thank U very much!
It is working!

15 Xephres February 7, 2010 at 3:07 am

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.

16 Peter deHaan February 7, 2010 at 7:44 am

@Xephres,

Set the selectedIndex property on the HorizontalList control to 0 (zero).

Peter

17 Xephres February 7, 2010 at 9:45 am: Wow, so easy?
Nice, it works ^ ^
Thanks :-)

18 Yugi February 8, 2010 at 1:02 am

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

Creating a simple image gallery with the Flex HorizontalList control

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

Creating a simple image gallery with the Flex HorizontalList control

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising