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