2 Replies Latest reply on Jun 6, 2007 2:31 PM by randyfong

    Need to click on the thumbnail and show the enlarged picture

    randyfong
      I am missing one last piece to my picture gallery that I need help on.

      From a datagrid, I am selecting a "city" that has a number of pictures associated with it. When the city is selected followed by pressing the "display pictures" button, a tile of pictures is presented.

      Each picture resides in a file on my website. They occur in order as "picture01", "picture02", etc depending on how may pictures have been taken for each city.

      What I would like to do is click on the thumbnail and show the enlarged picture in the container just below the tiles.

      That is where I am stuck.

      I want to be able to click on the thumbnail and fire off an event so I can set the source of my other container (with a larger height/width) to the thumbnail selected.

      The SWF can be found here:

      http://rfinc.net/pixGallery.swf

      Here is the code.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      layout="horizontal"
      xmlns:custom="*">

      <mx:Script>
      <![CDATA[
      // City Name Selected
      [Bindable]
      private var cityName:String = "";

      // Array for a single location pictures
      [Bindable]
      private var repeatArray:Array = new Array();

      // Function: Create City Pictures
      private function setRepeaterArray(pix:int):void {

      // Set Initialize Interim Array an Set the Number of Items in the Array

      var xArray:Array = new Array();
      var xMax:int = pix;

      // Populate the array
      var i:int;
      for (i = 1; i <= xMax; i++) {
      xArray.push(i);
      }

      // Set the array used to repeat images to the interim array

      repeatArray = xArray;
      cityName = myGrid.selectedItem.city;
      }
      ]]>
      </mx:Script>

      <mx:VBox width="200" height="100%" verticalAlign="top" horizontalAlign="left">
      <mx:Button label="Display Pictures" click="setRepeaterArray(myGrid.selectedItem.pix)"/>
      <mx:DataGrid id="myGrid" width="100%" height="100%">
      <mx:ArrayCollection>
      <mx:Object city="oakland" state="CA" pix="1" />
      <mx:Object city="sf" state="CA" pix="4"/>
      <mx:Object city="ny" state="NY" pix="2"/>
      </mx:ArrayCollection>
      <mx:columns>
      <mx:DataGridColumn headerText="City" dataField="city" width="10"/>
      <mx:DataGridColumn headerText="State" dataField="state" width="7"/>
      <mx:DataGridColumn headerText="# of Pictures" dataField="pix" width="15"/>
      </mx:columns>
      </mx:DataGrid>
      </mx:VBox>
      <mx:VBox width="80%" height="100%" backgroundColor="#c0c0c0">
      <mx:Text text="{cityName}"/>
      <mx:Tile id="tilePix" width="100%"
      direction="horizontal" borderStyle="inset"
      horizontalGap="5" verticalGap="1"
      paddingTop="5" paddingBottom="5" paddingLeft="5" paddingRight="5">

      <mx:Repeater id="myPix" dataProvider="{repeatArray}">
      <mx:Image id="myImage" width="96" height="72" source=" http://rfinc.net/gallery/{cityName}/picture0{myPix.currentIndex+1}.jpg" />
      </mx:Repeater>
      </mx:Tile>
      <mx:Image id="largePicture" width="300" height="180" source=" http://rfinc.net/gallery/sf/picture01.jpg"/>
      </mx:VBox>
      </mx:Application>