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 with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

76 Responses to Creating a simple image gallery with the Flex HorizontalList control

  1. Roland says:

    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. Neil says:

    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. Craig Lund says:

    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. Dane says:

    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. vicki says:

    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.

    • Peter deHaan says:

      @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

    • Mike says:

      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. DanSu says:

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

    thx a lot.. ^^

  7. Viorel says:

    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!

  8. Xephres says:

    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.

  9. Yugi says:

    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.

  10. Viorel says:

    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!

    • Peter deHaan says:

      @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

  11. Ronnie says:

    Hi Peter,
    How do i create a gallery of “Buttons”???

  12. Ronnie says:

    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 :)

    • Peter deHaan says:

      @Ronnie,

      Create a custom item renderer which is an mx:Button or whatever.

      Peter

      • Ronnie says:

        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.

  13. Mike says:

    Just take out the name property inside the CustomItemRenderer.mxml component and it should work great!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree