1 Reply Latest reply on Jan 15, 2010 9:40 PM by docx0156

    Imagerenderer in a Datagrid - Zoom?

    docx0156

      Greetings - I am a flex newb, so please bear with me.

       

      I am reading data from two different XML files - one has general data and one has the location of an image.

       

      I have created an imagerenderer to display the thumbnailed image in a column and everything looks great - but now I am baffled at how I can do some type of "onclick zoom image"..

       

      Ideally I would like something like a shadowbox type effect where the large version of the thumbnail is laid over the screen until the user clicks it away..

       

      I would also be okay with something like a simple zoom - which I know how to make work if the image was being displayed on a panel - but not when it is being displayed in a datagrid.

       

      I initially was displaying just text in the datagrid and the image below - but I didnt like that because that only allowed a small number of rows in the datagrid, and there is fairly large amount of data....

       

      Any help - complete with full code example would be appreciated.

       

       

        • 1. Re: Imagerenderer in a Datagrid - Zoom?
          docx0156 Level 1

          Just as an addition - this is what I am doing when I display the image outside of the datagrid - which is not what I want to do, but this is the behavior that I desire within the datagrid - or at least by the thumbnail in the datagrid being clicked:

           

           

           

           

          <mx:Resize id="resizeBig"

          widthFrom="

          300" widthTo="400"

          heightFrom="

          240" heightTo="340"/>

           

           

           

          <mx:Resize id="resizeSmall"

          widthFrom="

          400" widthTo="300"

          heightFrom="

          340" heightTo="240"/>

           

           

          and then where I actually present the image:

           

           

          <mx:Image x="10" y="415" width="300" height="240" id="imgGameScreen"

          source="

          {apps.app.(@id == datagrid1.selectedItem.recID).imageURL}"

          rollOverEffect="

          {resizeBig}"

          rollOutEffect="

          {resizeSmall}"/>