4 Replies Latest reply on Nov 8, 2006 1:37 PM by kofiaddaquay

    Image Gallery

    kofiaddaquay Level 1
      Hi, i have a question about displaying images in a next and previous order. i have a Repeater like so

      <mx:Repeater id="photos" dataProvider="{photoData}">

      <v:DisplayImage imageData="{photos.currentItem}" click="displayDetails(event.currentTarget.getRepeaterItem())" id="testImage"/>
      </mx:VBox>
      </mx:Repeater>

      displaydetails displays the image. i want to have a next and prev button to move to next or prev image within the details few but i am unsure to do that.

      what i do know is if i can have a click for next and prev to a function called e.g showNext

      then i can tell it to load the repeaters next image ( with a +1) . check out this code

      private function showNext():void
      {
      if (gallery.selected < gallery.photos.length - 1)
      {
      prevPhoto.img.source = ICON_LEFT;
      gallery.selected = gallery.selected + 1;
      carousel.rotateLeft();

      if (gallery.selected >= gallery.photos.length - 1)
      nextPhoto.img.source = ICON_RIGHT_DISABLED;
      }
      }
      in this case selected photo is array. how can i do this with a repeater
        • 1. Re: Image Gallery
          peterent Level 2
          I don't think you want a repeater for this, if I'm understanding the problem. When I look at your code I envision a vertical list of images. Is one of them "selected"? Do you want the Prev and Next buttons to move the selection?

          If that's the case, a Repeater won't help - all that does it build the UI. You have to come up with your own selection mechanism since the VBox doesn't have one.

          An alternative would be to use a TileList and make your DisplayImage the TileList's itemRenderer. The TileList has a selection mechanism.

          But may be I don't understand the problem.
          • 2. Re: Image Gallery
            kofiaddaquay Level 1
            hi, thanks for your response. sorry i left that part of the code out. the repeater is within a Tile tag. like this
            <mx:Tile>
            <mx:Repeater id="photos" dataProvider="{photoData}">

            <v:DisplayImage imageData="{photos.currentItem}" click="displayDetails(event.currentTarget.getRepeaterItem())" id="testImage"/>
            </mx:VBox>
            </mx:Repeater>
            </mx:Tile>

            just incase if you were wondering how the DisplayImage component looked like..here you go
            <mx:Image xmlns:mx=" http://www.adobe.com/2006/mxml"
            source="data/images/{imageData.filename}">

            <mx:Script>
            <![CDATA[
            [Bindable]
            public var imageData:Object;
            ]]>
            </mx:Script>
            </mx:Image>


            the displayDetails functions is a follows
            private function displayDetails(photoObj:Object):void
            {
            currentState = 'details';
            selectedPhoto = new Object();
            selectedPhoto = photoObj;
            photoInState.load('data/images/'+selectedPhoto.filename);
            }

            so basically the show image changes the viewstate to the details state. and this is where i want to have my next and previous buttons.

            i hope this help you more. thanks soo much. i really appreciate the time.

            Kofi
            • 3. Re: Image Gallery
              peterent Level 2
              Ignore the Repeater - all that did was create the items. It is the Tile you want to deal with. You'll have to have a variable that holds which child of the Tile has the 'selection' since a Tile container doesn't do selections itself. Then your next and prev buttons can tell the current 'selection' to turn off and set the next one on:

              (assuming <mx:Tile id="tile"> ...)

              var currentSelection:Number = -1; // ie, no selection

              if( currentSelection >= 0 ) (tile.getChildAt(currentSelection) as DisplayImage).displayDetails(...);
              currentSelection = newSelection;

              That's the idea anyway.
              • 4. Re: Image Gallery
                kofiaddaquay Level 1
                Thanks a whole lot!! i will give it a shot. and let you know

                Sincerely,
                Kofi