Flex Examples
In a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, we saw how to create a simple image gallery using the HorizontalList control and Image control in Flex.
The following example shows how you can change the full image whenever you roll your mouse cursor over the items in the HorizontalList control, as well as how you can double click an item in the Horizontal List control to display the image using the PopUpManager class.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/06/creating-a-simple-image-gallery-with-the-flex-horizontallist-control-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
Panel {
titleStyleName: panelTitleStyle;
}
.panelTitleStyle {
fontWeight: bold;
letterSpacing: 4;
textAlign: center;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.events.ListEvent;
import mx.events.ResizeEvent;
import mx.managers.PopUpManager;
private var fullImg:Image;
private function init(obj:Object = null):void {
if (obj == null) {
panel.title = "";
img.source = null;
} else {
panel.title = String(obj.@title).toUpperCase();
img.source = obj.@fullImage;
}
}
private function horizontalList_change(evt:ListEvent):void {
init(evt.target.selectedItem);
}
private function horizontalList_itemRollOver(evt:ListEvent):void {
init(evt.itemRenderer.data);
}
private function horizontalList_itemRollOut(evt:ListEvent):void {
if (horizontalList.selectedIndex == -1) {
init(null);
} else {
init(horizontalList.selectedItem);
}
}
private function horizontalList_doubleClick(evt:MouseEvent):void {
var obj:Object = evt.currentTarget.selectedItem;
fullImg = new Image();
fullImg.source = obj.@fullImage;
fullImg.toolTip = "Click to close pop up";
fullImg.buttonMode = true;
fullImg.useHandCursor = true;
fullImg.addEventListener(ResizeEvent.RESIZE, fullImg_resize);
fullImg.addEventListener(MouseEvent.CLICK, fullImg_click);
PopUpManager.addPopUp(fullImg, this, true);
}
private function fullImg_resize(evt:ResizeEvent):void {
PopUpManager.centerPopUp(fullImg);
}
private function fullImg_click(evt:MouseEvent):void {
PopUpManager.removePopUp(fullImg);
}
]]>
</mx:Script>
<mx:XML id="xml" source="gallery.xml" />
<mx:XMLListCollection id="xmlListColl" source="{xml.image}" />
<mx:Panel id="panel"
layout="absolute"
styleName="opaquePanel"
height="100%">
<mx:Image id="img"
scaleContent="true"
horizontalCenter="0"
verticalCenter="0"
maintainAspectRatio="true"
width="250"
height="250"
completeEffect="Fade" />
<mx:ControlBar>
<mx:HorizontalList id="horizontalList"
dataProvider="{xmlListColl}"
labelField="lbl"
iconField="src"
itemRenderer="CustomItemRenderer"
columnCount="4"
columnWidth="125"
rowHeight="100"
horizontalScrollPolicy="on"
change="horizontalList_change(event);"
itemRollOver="horizontalList_itemRollOver(event);"
itemRollOut="horizontalList_itemRollOut(event);"
doubleClickEnabled="true"
doubleClick="horizontalList_doubleClick(event);" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
View source is enabled in the following example.
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.
Share
I’m almost certain that this is the improper post for this question, but I couldn’t find anything any more appropriate. I’m working on an app that is similar in some functions to a basic image gallery, such as your horizontal list of thumbnails and a larger display image here, my question pertains to drag and drop support. Do you know of any ideas on how to keep an item selected after a drop action? For instance, if I wanted to rearrange the order of the icons in this image gallery, would it be possible to keep the dragged icon selected after a drop event?
By the way, great site, wonderful resource for a Flex beginner such as myself.
Great Example!! And Best Flex Blog ever!!
And I also want to ask some advanced examples of SWF Address
to get urls like http://host/application/#/State/SelectedIndex
Excellent!!!
i love the rollover effect.
Is that possible to dragging thumbnails and drop it panel for preview ?
How can i get dragInitiator for using DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
I try
var dragInitiator:Image = event.currentTarget as Image;
var dragInitiator:Image = event.currentTarget.selectedItem as Image;
but doesn’t works.
i have an application with two canvases.
each canvas is shown by clicking on a tab in a tabbar.
when the first tab bar is displayed an image is shown but when i click on the second tab and return to the first everything is as i left it except for the image, it is blank.
when i debug the image source is not null neither is the bitmapData of the source.
can you tell me why my image is disappearing?
TIA.
love your blog
kroikie.
kroikie,
That sounds odd. Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case and somebody can take a look at it.
Thanks,
Peter
You *$%^& :)
I had just got the previous version working to play video instead of showing images – now I have to redo it for this version.
Its going to be more complicated – I cant really load a video on every image mouseover (?) – that would kill the app I am sure.
So I should load the image as above and then load the video on click. (BTW, is there a reason you chose doubleclick rather than single?).
So my main question is what would be the best way? – I was thinking of using a stack and bringing the video up when the image is clicked. I would create a new stack on every image mouseover, if I am right then the video doesn’t load until it comes into view…..
Does that make sense or can you think of a better way?
Great site BTW – I have learned more browsing on here and playing with your samples for a few days than 2 weeks using tutorials etc.
Damian
I forgot to mention I don’t really want to use the pop-up for the video – that would be too ez lol
how would you do 2 rows for the thumbnails?
thanks for a great gallery
flex lover,
Use the TileList control.
Peter
Hi.. i love this..
but how do you ensure that the pics are of the right size?
i tried on the codes but my pics are either blur on the centre screen or they have a scrollbar on each images..
Thanks in advance
Hi
hi have a question, I can’t change the with of items in the HorizontalList, it is possible?
Can I have the first item 100px, the second 200px the third 300px ecc…?
Thanks in advance
Francesco
Francesco I have exactly the same problem and the same question… It seems to be very difficult. Have you found a solution ? It would be very great to have variable column width… I have tried a lot and I think that column width are always overrided by the tilebase or listbase.
If someone have a solution… Thanks a lot !
Paul
This blog is really helpful – thanks!
My question is, how would I alter the dataprovider if I wanted one or more full images to display, depending on the thumbnail that is clicked?
Would this require some sort of multidimensional array?
I can work out formatting a list control to display the images, but don’t know how to create an array where fullImage could have more than one file associated with it.
?
thx!
chip,
Yeah, I’d probably try and do something with a multidimensional array. Possibly something like the following:
Then, when the thumbnail is clicked, show the currently selected item’s
fullImages[0]image. If thefullImagesarray has more than 1 image, you could possibly set up a timer to loop through the images, or try and use some keyboard navigation to cycle through the available images, or whatever you want.Peter
Hi,
Very nice tutorial.
I like to know the structure of an gallery.xml file used.
Thanks
@Senling,
http://blog.flexexamples.com/wp-content/uploads/HorizontalList_itemRollOver_test/bin/srcview/source/gallery.xml.txt (via view source)
Peter
Thanks peter..
Senling
Hi guys,
would it be possible to hide the scrollbar? I would like to scroll using 2 side buttons (on left and right).
just found this example – http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/#more-583
just what I needed, this site is great, thank you!
Hi Peter,
Great tutorial you have here! A quick question though… How would I go about allowing the user to change the colours of the graphic loaded into the pop-up window from the gallery AND resize the image loaded into the pop-up window making it larger, but maintaining the aspect ratio?
For instance, say I clicked on the Flex picture in your above example and wanted the user to be able to change the black Flex icon’s background colour to pink and the white FX text to Orange, and then be able to also make the image a bit larger, how would I do that? Would the original image have to be an svg file?
To put it in context, I am building an image gallery where the images are supposed to be customizable. This way, if 100 users load the same image, they can each end up with a different version of the same image if they choose different colors and re-size the image differently. I am working with svg files to build the gallery, however, as I’m new to Flex, I’m not sure how to change the color or allow the images to be re-sized.
Will you help?
Thanks,
Deebs
Thank you very much for this example. I have noticed that by default no image is displayed in the display area. Is there a way to display the first image from horizantal list by default whenever the application is launched? I am new to Flex so have limited knowledge about the various APIs available to get this feature done. Appreciate your help in advance. Thanks
@Anonymous,
Set the
selectedIndexproperty to 0.Peter
hello would like to know the list of control panel styles available as styleName = “opaquePanel” and all other controls, if the default styles or custom styles, excuse my English, I speak Spanish … thanks
great job, it’s wonderfull. thanks.