Creating a simple image gallery with the Flex HorizontalList control

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.

76 thoughts on “Creating a simple image gallery with the Flex HorizontalList control

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

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

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

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

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

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

  6. 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!

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

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

  9. I have a question about the quality of the pictures. I don’t know if this is the right place to ask. No matter what picture size I use (4MB or 150KB) the result is the same: poor quality picture. Can I set a parameter for picture quality!
    Thank U very much for this great tutorial!

    1. @Viorel,

      There may be a smoothing property somewhere you could set. Although the best approach may be to have images which are sized to fit the Flex application. For examples, the thumbnails in the above example look pretty good because they are small and not distorted, but the large images look somewhat poor because they are being stretched and resized to fit in the application (because I couldn’t be bothered to resize them in Photoshop).

      Peter

  10. I have tried to use your idea to create a list of buttons in place of images. But it didnt work out. Plz let me know if there is anything els that i would need to do to create a gallery of buttons.
    Thanks :)

      1. Thx Peter,
        But thats exactly what i ve tried. Before i placed the buttons inside the list i could drag and drop them onto a canvas. But now i suppose i am not able to do that, since i have them as objects.

Comments are closed.