Creating a simple image gallery with the Flex HorizontalList control

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

1. Roland says:

   August 20, 2009 at 12:59 am

   Reply
2. Roland says:

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

   Reply
3. Neil says:

   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.

   Reply
   • Peter deHaan says:

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

   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.

   Reply
5. Dane says:

   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

   Reply
6. vicki says:

   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.

   Reply
   • Peter deHaan says:

     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

     Reply
   • Mike says:

     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.

     Reply
     • vicki says:

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

   December 1, 2009 at 10:10 am

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

   thx a lot.. ^^

   Reply
8. Viorel says:

   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!

   Reply
   • Peter deHaan says:

     January 5, 2010 at 7:55 am

     @Viorel,

     Try setting the selectedIndex property to 0 in the HorizontalList.

     Peter

     Reply
     • Viorel says:

       January 7, 2010 at 2:03 pm

       Thank U very much!
       It is working!
9. Xephres says:

   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.

   Reply
   • Peter deHaan says:

     February 7, 2010 at 7:44 am

     @Xephres,

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

     Peter

     Reply
     • Xephres says:

       February 7, 2010 at 9:45 am

       Wow, so easy?
       Nice, it works ^ ^
       Thanks :-)
10. Yugi says:

    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.

    Reply
11. Viorel says:

    March 3, 2010 at 1:20 pm

    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!

    Reply
    • Peter deHaan says:

      March 3, 2010 at 5:56 pm

      @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

      Reply
12. Ronnie says:

    May 30, 2010 at 4:38 am

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

    Reply
13. Ronnie says:

    May 30, 2010 at 6:09 am

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

    Reply
    • Peter deHaan says:

      May 30, 2010 at 3:56 pm

      @Ronnie,

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

      Peter

      Reply
      • Ronnie says:

        May 31, 2010 at 12:40 am

        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.
14. Mike says:

    August 8, 2011 at 5:30 pm

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

    Reply