Creating a simple image gallery with the Flex TileList control

Similar to a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, the following example shows how you can create a simple photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        global {
            modal-transparency: 0.9;
            modal-transparency-color: white;
            modal-transparency-blur: 9;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.effects.Resize;
            import mx.events.ResizeEvent;
            import mx.events.ListEvent;
            import mx.controls.Image;
            import mx.events.ItemClickEvent;
            import mx.managers.PopUpManager;

            private var img:Image;

            private function tileList_itemClick(evt:ListEvent):void {
                img = new Image();
                // img.width = 300;
                // img.height = 300;
                img.maintainAspectRatio = true;
                img.addEventListener(Event.COMPLETE, image_complete);
                img.addEventListener(ResizeEvent.RESIZE, image_resize);
                img.addEventListener(MouseEvent.CLICK, image_click);
                img.source = evt.itemRenderer.data.@fullImage;
                img.setStyle("addedEffect", image_addedEffect);
                img.setStyle("removedEffect", image_removedEffect);
                PopUpManager.addPopUp(img, this, true);
            }

            private function image_click(evt:MouseEvent):void {
                PopUpManager.removePopUp(evt.currentTarget as Image);
            }

            private function image_resize(evt:ResizeEvent):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }

            private function image_complete(evt:Event):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }
        ]]>
    </mx:Script>

    <mx:WipeDown id="image_addedEffect" startDelay="100" />

    <mx:Parallel id="image_removedEffect">
        <mx:Zoom />
        <mx:Fade />
    </mx:Parallel>

    <mx:XML id="xml" source="gallery.xml" />
    <mx:XMLListCollection id="xmlListColl" source="{xml.image}" />

    <mx:TileList id="tileList"
            dataProvider="{xmlListColl}"
            itemRenderer="CustomItemRenderer"
            columnCount="4"
            columnWidth="125"
            rowCount="2"
            rowHeight="100"
            themeColor="haloSilver"
            verticalScrollPolicy="on"
            itemClick="tileList_itemClick(event);" />

</mx:Application>

View CustomItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        horizontalAlign="center"
        verticalAlign="middle">

    <mx:Image source="{data.@thumbnailImage}" />

    <mx:Label text="{data.@title}" />

</mx:VBox>

View gallery.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<gallery>
    <image title="Flex"
        thumbnailImage="assets/fx_appicon-tn.gif"
        fullImage="assets/fx_appicon.jpg" />
    <image title="Flash"
            thumbnailImage="assets/fl_appicon-tn.gif"
            fullImage="assets/fl_appicon.jpg" />
    <image title="Illustrator"
            thumbnailImage="assets/ai_appicon-tn.gif"
            fullImage="assets/ai_appicon.jpg" />
    <image title="Dreamweaver"
            thumbnailImage="assets/dw_appicon-tn.gif"
            fullImage="assets/dw_appicon.jpg" />
    <image title="ColdFusion"
            thumbnailImage="assets/cf_appicon-tn.gif"
            fullImage="assets/cf_appicon.jpg" />
    <image title="Flash Player"
            thumbnailImage="assets/fl_player_appicon-tn.gif"
            fullImage="assets/fl_player_appicon.jpg" />
    <image title="Fireworks"
            thumbnailImage="assets/fw_appicon-tn.gif"
            fullImage="assets/fw_appicon.jpg" />
    <image title="Lightroom"
            thumbnailImage="assets/lr_appicon-tn.gif"
            fullImage="assets/lr_appicon.jpg" />
    <image title="Photoshop"
            thumbnailImage="assets/ps_appicon-tn.gif"
            fullImage="assets/ps_appicon.jpg" />
</gallery>

View source is enabled in the following example.

92 thoughts on “Creating a simple image gallery with the Flex TileList control

  1. deenalex,

    You can use the navigateToURL() function to open new web pages:

    <mx:Script>
        <![CDATA[
            import flash.net.navigateToURL;
    
            private function gotoGoogle():void {
                navigateToURL(new URLRequest("http://www.google.com/"));
            }
        ]]>
    </mx:Script>
    
    <mx:LinkButton label="Google.com" click="gotoGoogle();" />
    

    Peter

  2. Hi peter,

    I got enrolled in project which mainly uses ILog component, i know some thing about ilog. Can you help me out to get some good examples and how to get similar with ilog.

    Thanks in advance.
    Deenalex.

  3. Hello PeterD,

    I saw your example with the TitleWindow and displays an Image control inside it. Is it also possible to add a next and a previous button in a TitleWindow, so when it’s clicked, the TitleWindow shows the next and the previous large image in the xml-file/tilelist?

    Kind regards,
    Herman

  4. i used this code for image gallery it is working good with the relative adjustments which are to be made mandatorily.will you please let me know the procedure for giving the zooming effect for the image individually.

  5. Hi peter,

    I have task to show bottom faced tab navigation, i mean opposite view of normal tab navigation. It depends on style of tab or i have to change codes in normal Tab navigation itself….

    Thanks in Advance….
    deenalex

  6. Thanks for the codes! It worked fine

    I just have a question to ask,
    Does anyone know how to make the scroll bar transparent?

  7. Hi, anyone have an idea of how to display images from mysql database instead of xml files? i am using php codes to link between flex and the database. i have insert http service into my main mxml.. and i think i need to add sometimg to my customItemRenderer. hope someone here will be able to help..

    Thanks in Advance…
    Rina

  8. Hey,

    very cool piece of code you got there. I am currently putting together a Flex Image gallery just like it, however I want to streamline everything to give the user a really good experience in terms of speed. I am honestly quite new to Flex Framework itself but know flash pretty well. Just wondered why this file is so big!? I mean I have exported it as a release but the SWF itself is like 268KB. Even the main.swf you put up here is the same so I was just wondering in terms of optimization is there something I am missing? I’d really appreciate it if someone can point me in the right direction.

    Thanks for your response
    J

  9. I have a problem with the “image_removedEffect”. When the image is clicked, it just disappears, without playing any effect.

  10. Peter,
    I do not understand why it happens like this – when I click my mouse in the TileList container, in the empty space adjacent to the image titled “Photoshop”, that image gets selected. Is it not possible to make that image get selected, only when the mouse is clicked on it?

  11. I’ve try to download the zip Flex project file.
    Why flex ask me a libs folder?

    Severity and Description Path Resource Location Creation Time Id
    unable to open ‘/Users/walterfantauzzi/Documents/Flex Builder 3/TileList_itemClick_test/libs’ TileList_itemClick_test Unknown 1240900800790 3208

    How I can use this code to learn how make a gallery XML in flex?

    thanks

  12. ryosaeb4,

    Yeah, you may need to create an empty /libs/ folder in your Flex project. I think I may have forgotten to publish that empty folder when exporting some of these projects.

    Peter

  13. instead of jpgs, i load swfs into the gallery when i click on the thumbnail. i have been racking my brain trying to figure out how to add the close button to the swf that is loaded. what code do i type into flash to make that happen?

  14. Hi, first – your gallery is great! I little tune up code for my gallery and it look beautiful.
    But, i’ve read all comments, especially from Herman, because i also want to add prev/next buttons to popup.
    As far, no result… Can you give me any idea how to do that?

  15. Is there anyway to prevent the image redraw when you scroll? It has a serious lag on it that I’ve noticed with this type of list component. It would be nice if you could cache the image somehow so the flex app doesn’t have to redraw it when you scroll the list

  16. First, I want to say thanks for this wonderful example! It has helped me out a great deal. Next, to know if you could explain how to add text to the function that brings in the fullImage? For example, in the xml file if there is a node called “description” how can data be brought into the item renderer via data.@description ?

  17. thanks peter, for this nice gallery.
    it really helped me a lot.
    but, is there any possibility to change the itemClick event to a keyDown ?
    when i use keyDown instead of itemClick there is a problem with the parameter throwed because the itemClick event throws a ListEvent,
    but the keyDown does not. i mean of course because its only keyDown and not itemKeyDown.. but i still dont know how to fix this.

    any idea?
    can someone other help me?

    thanks alot so far (:
    martin

    1. @Martin,

      Instead of this:

      private function tileList_itemClick(evt:ListEvent):void {

      Try this:

      private function tileList_itemClick(evt:Event):void {

      Not sure if that will work completely since the code tries to access img.source = evt.itemRenderer.data.@fullImage; in that event handler, so you may need to tweak it slightly to get the full image source.

      Peter

      1. well, with only changing the ListEvent to Event it wont work because a normal Event type has no .itemRenderer method. am I right?
        I really have no idea how to get the selected item without reading it out through event.itemRenderer.data

      2. @Martin,

        Sorry, I don’t have time to verify right now, but maybe try changing this:

        img.source = evt.itemRenderer.data.@fullImage;

        To this:

        img.source = tileList.selectedItem.@fullImage;

        Peter

  18. Thank you for this sample code.. I am using the Flex Application and am not sure where to put all of these files to make this project run… any chance some one might not mind documenting where to put each piece for example CustomRenderMxml…. where do take the text and save it… whats the path…

  19. Hello Every1,

    Does anyone know how to make turn the the thumbnail image into a web URL from the xml file ?

    for example if there’s a tag http://www.adobeflex.com for the flex image

    hope someone can help me out on this one!

  20. Do you the best way to convert an image into a thumbnail dynamically? Also I am trying to convert from other formats such as .psd.

    1. @bridget,

      I don’t know about .PSD files specifically, but ColdFusion has some image manipulation capabilities and can resize images quite nicely. I’m pretty sure you can also look into ImageMagick which is a great image library, which I believe supports .PSD files.

      ImageMagick is a software suite to create, edit, and compose bitmap images. It can read, convert and write images in a variety of formats (over 100) including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, and TIFF. Use ImageMagick to translate, flip, mirror, rotate, scale, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.

      The functionality of ImageMagick is typically utilized from the command line or you can use the features from programs written in your favorite programming language. Choose from these interfaces: G2F (Ada), MagickCore (C), MagickWand (C), ChMagick (Ch), ImageMagickObject (COM+), Magick++ (C++), JMagick (Java), L-Magick (Lisp), NMagick (Neko/haXe), MagickNet (.NET), PascalMagick (Pascal), PerlMagick (Perl), MagickWand for PHP (PHP), IMagick (PHP), PythonMagick (Python), RMagick (Ruby), or TclMagick (Tcl/TK). With a language interface, use ImageMagick to modify or create images dynamically and automagically.

      ImageMagick is free software delivered as a ready-to-run binary distribution or as source code that you may freely use, copy, modify, and distribute. Its license is compatible with the GPL. It runs on all major operating systems.

      Peter

  21. Heey Peter,

    i’m trying to reconstruct your Gallery in an Air application.
    But doing that, it doesnt recognize CustomItemRenderer.mxml.

    1172: Definition CustomItemRenderer could not be found. PortfolioRypens/src/be/Rypens/PortfolioRypens/model/views cmpGallery.mxml

    Any idea?

  22. Hi
    its nice. but it contain lot problem .actually am give image name through xml. i have 10 xml and am already load and give data to tile list using combo its not work perfectly .some time some images are missed . i dont know wat to do… pls help

  23. I often get some error when I try to open and close all of the images sequentially using your code: more precisely, when I click on a thumb I can’t get the popup! The program seems to be idle.. Then I refresh the page and I’m able to open/close some pic but it comes again the bug! Any suggestion?
    RangeError: Error #2006

  24. hi petar I am new in flex and i want to make same application which u show in demo but this is not working in my application. I found an error like “Problem finding external XML:gellery.xml”.please help me in this.

    thanks in advance

    1. @wasim,

      You need to make sure you copy/paste the “gallery.xml” file and put it in the same directory as your *.mxml file.
      Also, make sure you spelled the name correctly. It should be “gallery.xml” but your error message says “gellery.xml”.

      Peter

  25. Hi..
    Am new to flex, can any one help me out..?
    in th above example tht is to create image gallery, the code is very intersesting but wanted to know if i have to just copy the codes fully into main.mxml…?
    DO let ne know, am getting errors/

    Thanks in advance

    1. hi peter ,i saw ur blogs it simply superb to understand
      i am new to flex i am trying with basic things ,now i am trying to create a image gallery where images will be displayed and i am trying to achive drag and drop from that gallery to nother canvas can u please help with some code ……
      thank u

  26. Hello Peter
    I really appreciate this article and it has helped me a lot. I have implemented the code seamlessly but stuck in one simple problem, that is when I call “PopUpManager.removePopUp” example you mentioned, the image is destroyed and the thumbnail or small image displays nothing. Is there any way to retain the image somehow, i am using an object of Bitmap type to set the source

Comments are closed.