Flex Examples

35 Responses to “Creating a simple image gallery with the Flex HorizontalList control”

1. 1 jdh Feb 15th, 2008 at 9:11 pm

   Nice!! I love mnemonics.

2. 2 Guiso Feb 16th, 2008 at 2:52 am

   Very good.

   I’m new with adobe flex and I think that your blog is the best I have seen. You put a lot of things.

   I could make the same, but loading a video with some controls (play,stop, dull screen)?

3. 3 peterd Feb 16th, 2008 at 9:35 am

   Guiso,

   I don’t have any examples on a simple video gallery using a HorizontalList control, but it should be very similar to the example above. Simply replace the Image control with a VideoDisplay control. Then whenever you click on the thumbnail image in the HorizontalList control the FLV would be loaded instead of a JPEG.
   As for the play/pause/stop controls for the video, check out some of the VideoDisplay specific posts on this blog at http://blog.flexexamples.com/category/videodisplay/.

   Hope that helps,
   Peter

4. 4 Katherine Feb 17th, 2008 at 9:50 pm

   Thanks for doing this example. It encourages me to forget about my approach of embedding the thumbnails in the application — unnecessary overhead, and mine is probably not a good use of binding. Though my usage is a bit different, maybe I’ll see if I can modify it and go for something more like what you’ve done. Since I’m not using labels for my thumbs, I don’t need the custom item renderer but, again, thanks for show an example that includes one.

5. 5 John Feb 18th, 2008 at 7:47 am

   Would it be possible to dress this up a bit? For example, when the image is clicked, have it gradually scale to the final size, and move to that location while it is enlarging?
   Thanks!

6. 6 Neogene Feb 19th, 2008 at 5:18 am

   Hi, il’d like to tell that an italian site (sigh, i’m italian) did a COPY and PASTE of your code (the modified only the number and name of mx:objects). Reading today i rembered that you posted some days ago so… i hate the fact that they don’t say that the source is from you.

   http://www.augitaly.com/flexgala/index.php?cmd=newsreader&id=220.

7. 7 peterd Feb 20th, 2008 at 5:01 pm

   Neogene,

   Thanks for the heads up. I don’t speak any Italian, but a few of their articles look VERY similar to mine (again, they only changed some variable names and translated English into Italian).

   Hhhmmm,
   Peter

8. 8 Neogene Feb 21st, 2008 at 12:36 am

   Don’ use “look”: better to say ARE EQUALS.

   Italian style :-(

9. 9 Neogene Feb 24th, 2008 at 11:54 am

   Hey justice is done :-) Now they linked to your site and write that the article is “inspired” from you post :-)

10. 10 peterd Feb 24th, 2008 at 11:11 pm

    Neogene,

    Yeah, it was just a simple misunderstanding. I emailed them and they were very apologetic and understanding. The posts are all released under Creative Commons License (see the link in the footer for exact details), so basically everybody is free to use/remix the examples, as long as they cite the source (this blog), and release the code under a similar Creative Commons License.

    Thanks again,
    Peter

11. 11 ChrisXPPro Mar 3rd, 2008 at 10:29 am

    Ive Been Looking for a Web Gallery For a While Now, and I Love Yours.

    Im New To Flex.

    Question tho.
    is there a way to make the horizontal bar smaller in height and have the images not be scrolling up and down?

    -Chris

12. 12 Jason Mar 9th, 2008 at 3:05 pm

    Thanks for the article. I really like what you have done. My first two questions that come to mind are:

    1. Will this handle sizing images that have different heights and widths than others?

    2. How would you set this up to handle a folder of pictures that you would like to read each time it is loaded? For instance, you want a gallery that will search a folder for images as it loads and build the image viewer based off the images in the folder. Is this possible?

    Thanks,
    Jason

13. 13 peterd Mar 9th, 2008 at 3:31 pm

    Jason,

    My first two answers that come to mind are:
    1. Probably. I never tried, it may need some tweaking.
    2. Possible in something like AIR since an AIR app would have file system permissions. If you were doing a Flex on the web, you would need a server-side script (ColdFusion, PHP, JSP, ASP, Ruby, etc) to get a directory listing, and return a list of all the images. Although in most cases I think you would want to just create a static XML file containing image names/paths and load that. It would probably be a bit more efficient than doing a file system check each time the Flex app is loaded. You could probably even set up a scheduled task on the server that would get a directory listing once every hour and update the XML file accordingly.

    Peter

14. 14 Swaminathan Mar 10th, 2008 at 6:51 pm

    Very nice Article.

    I am new to Flex, am looking for the Canvas to canvas drag and drop images. and save the canvas images to the database and retrieve it. how can i?

    Can u please give me solution.

    Swamy

15. 15 Swaminathan Mar 10th, 2008 at 6:53 pm

    Very nice Article.

    I am new to Flex, am looking for the Canvas to canvas drag and drop images. and save the canvas images to the database and retrieve it. I finished the canvas to canvas dragging, only i need the solution for saving the current canvas images to the database and then retrieve to the same canvas. how can i?

    Can u please give me solution.

    Swamy

16. 16 ridgeback Mar 12th, 2008 at 2:19 am

    Very nice.

    I am new to Flex, how about for slide show with thumbnail, and if the image is being displayed there is a highlight in the thumbnail image and every image that are going to display their thumbnail is at the center of horizontal list.

    Please help me.

    Thanks in advance.

17. 17 Alexander Mar 30th, 2008 at 10:55 am

    I am using an itemRenderer and in that renderer i am calling the init() method of mine on creationComplete even of the renderer component.

    The List dataprovider is an ArrayCollection from LCDS rtmp and i notice that the init() function does not get called everytime a new item is added.

    So I guess my question is, how can i EVERYTIME call a function in my itemRenderer component?

18. 18 baroquedub Apr 15th, 2008 at 10:30 am

    Hey - thanks for sharing! Great post for newbies like me just getting up and running from Flash to Flex.

    All’s working great but I’m now trying to add a on mouse over functionality in order to display the image title on hovering over a thumbnail (rather than after clicking to select).

    Slightly changing your original code:

    displays the label attribute on *selectedItem* but I’d want something like:

    - but can’t seem to find anything remotely like horizontalList.highlightedItem in Flex3 docs for the horizontalList class…

    I can’t be the first person who’s needed to do this. Can anyone help?

19. 19 baroquedub Apr 15th, 2008 at 10:34 am

    !!!aarghh, comment box stripped out my code!!!

    Let’s try again. For a Text component, I’m looking to change:

    text="{horizontalList.selectedItem.label}
    

    to something along the lines of:

    text="{horizontalList.highlightedItem.label}
    

    (but ‘highlightedItem’ isn’t part of the flex api)

20. 20 peterd Apr 15th, 2008 at 12:46 pm

    baroquedub,

    What about using the itemRollOver event?

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">
    
        <mx:Script>
            <![CDATA[
                import mx.events.ListEvent;
    
                private function horizontalList_itemRollOver(evt:ListEvent):void {
                    lbl.text = evt.itemRenderer.data.label;
                }
            ]]>
        </mx:Script>
    
        <mx:Array id="arr">
            <mx:Object label="One" />
            <mx:Object label="Two" />
            <mx:Object label="Three" />
            <mx:Object label="Four" />
            <mx:Object label="Five" />
            <mx:Object label="Six" />
            <mx:Object label="Seven" />
            <mx:Object label="Eight" />
            <mx:Object label="Nine" />
            <mx:Object label="Ten" />
        </mx:Array>
    
        <mx:HorizontalList id="horizontalList"
                dataProvider="{arr}"
                rowHeight="100"
                rowCount="1"
                columnWidth="100"
                columnCount="5"
                itemRollOver="horizontalList_itemRollOver(event);" />
    
        <mx:Label id="lbl" />
    
    </mx:Application>
    

    Peter

21. 21 Micanio May 28th, 2008 at 7:03 am

    Great article - I’m new to Flex and this has really helped my understanding of the software.

    I have one question though -

    Is it possible to have the first image displayed when the gallery is loaded? Currently, the gallery is blank when first loaded, but I would like to have the first image shown by default, instead of the user clicking on a thumbnail.

    Thanks in advance

    Micanio

22. 22 peterd May 28th, 2008 at 7:21 am

    Micanio,

    Sure thing, just set the selectedIndex property to 0 (to have the first item pre-selected) and that should be all you need:

    <mx:HorizontalList id="horizontalList"
            labelField="label"
            iconField="thumbnailImage"
            dataProvider="{arr}"
            selectedIndex="0"
            itemRenderer="CustomItemRenderer"
            columnCount="4"
            columnWidth="125"
            rowCount="1"
            rowHeight="100"
            horizontalScrollPolicy="on" />
    

    Peter

23. 23 Micanio May 28th, 2008 at 7:26 am

    Thats perfect - thanks very much!!!!

24. 24 emoento Jun 20th, 2008 at 2:30 am

    the articals are too exiting for freshers
    you site is just like a magnet attracting a lot

25. 25 pete Jun 29th, 2008 at 6:10 am

    Thanks for these articles Peterd. Like alot of people here I’m new to Flex too, and you’ve provided great little examples that help teach.
    Pete (II)

26. 26 JohnD Jul 2nd, 2008 at 7:00 pm

    Hi Peterd

    Can I apply the itemRollOver event (below) on the images not just on the labels

    What about using the itemRollOver event?

27. 27 JohnD Jul 2nd, 2008 at 7:03 pm

    I forgot to escape my characters, the code I am refering to is the one posted Apr 15th, 2008 at 12:46 pm

28. 28 JohnD Jul 2nd, 2008 at 7:33 pm

    I figured it out

    import mx.events.ListEvent;
    
    private function tileList_itemRollOver(evt:ListEvent):void
    {
        Thumb.source = evt.itemRenderer.data.thumbnailImage;
    }
    

    Thanks

29. 29 amar Jul 17th, 2008 at 6:07 am

    nice work Peter!
    Can u tell me how to add a button on the both sides(in the beginning and in the end also) so that I can get rid of these horizontal scroller and it will look pretty .
    I trid to put button inside the Horizontal list as
    mx:HorizontalList xmlns:mx=”http://www.adobe.com/2006/mxml” width=”442″ height=”86″>

    But it does’nt show buttons at run time.
    I m very new to Flex so I don’t know why its not showing up on run time.
    Can you suggest me how to do that!
    Thanks & Regards!
    Amar!
    amarshukla123@gmail.com

30. 30 amar Jul 17th, 2008 at 6:12 am

    code was-

    <mx:HorizontalList xmlns:mx=”http://www.adobe.com/2006/mxml” width=”442″ height=”86″>
    <mx:Button label="next" />
    <mx:Button label="next" />
    <mx:Button label="Prev" />
    </mx:HorizontalList>
    

    actually i m making a custom component.Problem is as written above.

    Thanks & Regards!
    Amar!
    amarshukla123@gmail.com

31. 31 Krittiya Jul 22nd, 2008 at 9:52 am

    Is there a way to set lineScrollsize of the scrollbar in HorizontalList ?
    In this example, when you click at the scrollbar ’s arrow, one item is scrolled at a time. I’m looking for a way to make more than one item to scroll at a time. Any example will be appreciated . Thanks!

32. 32 Lisa Jul 22nd, 2008 at 6:15 pm

    Id like to change the size of the thumbnails and have 2 rows, but then i messed up the area for the large image. any ideas
    thanks
    beautiful work

33. 33 MarcMM Jul 25th, 2008 at 12:12 pm

    fixed the thumbail problem, just took time playing with the code.

    how would i go about adding transisions to the large images. fade in etc

    thanks

34. 34 peterd Jul 25th, 2008 at 12:34 pm

    MarcMM,

    The easiest way is probably to set a completeEffect on the image/thumbnail:

    <mx:Image id="img"
            source="{horizontalList.selectedItem.fullImage}"
            maintainAspectRatio="true"
            horizontalAlign="center"
            width="{horizontalList.width}"
            height="100%"
            completeEffect="Fade" />
    

    Peter

35. 35 FlexMan Jul 30th, 2008 at 10:18 am

    Thanks for this ,

    how would i have 2 rows? ive been playing with it but it stretches and the main image becomes smaller, but i need more images and no scroll

    thanks

Leave a Reply