3 Replies Latest reply: Apr 3, 2013 5:50 AM by soul-mapp RSS

    Image gallery. How to click on image to advance to next image?

    56231 Community Member

      Flex 4, flash builder 4.6.

      This gallery has a row of numbers. When you click on a number, a photo displays above. Each number represents a photo from data.xml. Works good. Now I want to click on a photo that is already displayed and cause the next photo in the series to display. How do I go about doing this? Thanks.

       

      <s:Application creationComplete="service.send()">

      <fx:Declarations>

              <s:HTTPService id="service" url="data.xml" result="serviceHandler(event)"></s:HTTPService>

      </fx:Declarations>

      <fx:Script>

              <![CDATA[

                     import mx.collections.ArrayCollection;

                     import mx.rpc.events.ResultEvent;

                     [Bindable]

                     private var images:ArrayCollection;

       

                     private function serviceHandler(event:ResultEvent):void{

                          images = event.result.gallery.image;

                     }

              ]]>

      </fx:Script>

       

      <s:Image source="assets/poster/{imagesList.selectedItem.pic}" />

       

      <s:List id="imagesList" dataProvider="{images}">

           <s:itemRenderer>

                  <fx:Component>

                      <s:ItemRenderer>

                          <s:Label text="{data.number}"  fontSize="12" />

                      </s:ItemRenderer>

                  </fx:Component>

            </s:itemRenderer>

      </s:List>

      </Application>

       

      data.xml

      <gallery>

          <image>

              <number>01</number>

              <pic>photo01.jpg</pic>

          </image>

          <image>

              <number>02</number>

              <pic>photo02.jpg</pic>

          </image>

      </gallery>

        • 1. Re: Image gallery. How to click on image to advance to next image?
          Sathyamoorthi Community Member

          do actionscript.

           

           

          priavte function LstChangeHandler():void

          {

              if(imagesList.selectedItem)

                img.source = "assets/poster/" + imagesList.selectedItem.pic.toString();

          }

           

          private function ImageClickHandler():void

          {

               if(imagesLis.selectedIndex > -1 && imagesLis.selectedIndex < imagesLis.dataProvider.length)

           

               {

                        imagesList.selectedIndex = imagesList.selectedIndex + 1;             

                             LstChangeHandler();

               }

           

          }

           

           

           

           

          <s:Image id="img" click="ImageClickHandler()" />

           

          <s:List id="imagesList" dataProvider="{images}" change="LstChangeHandler()">

               <s:itemRenderer>

                      <fx:Component>

                          <s:ItemRenderer>

                              <s:Label text="{data.number}"  fontSize="12" />

                          </s:ItemRenderer>

                      </fx:Component>

                </s:itemRenderer>

          </s:List>

          </Application>

           

           

          I didn't test it but it will work.

          • 2. Re: Image gallery. How to click on image to advance to next image?
            56231 Community Member

            It works perfect. Thanks for your help. I am going to study it some more.

            • 3. Re: Image gallery. How to click on image to advance to next image?
              soul-mapp Community Member

              Hi..

               

              i have a simaliar problem, can anyone help..

              Ive made a gallery using xml and the sparks list component. that displays images in a horz list which ofcourse can be clicked to see the larger image, but then ofcourse to view the to other images or the next image you have to hit the back button and then select another.

              How can i swipe on the large image for move to the next item  without having to go back to list.    Thanks.

               

              here is what ive got so far..

               

              <?xml version="1.0" encoding="utf-8"?>

              <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

                      xmlns:s="library://ns.adobe.com/flex/spark"

                      title="Page {id1}"

                      destructionPolicy="never"

                      actionBarVisible="true"

                      viewActivate="init()">

                 

                  <fx:Script>

                      <![CDATA[

                          import valueObjects.Bookpage;

                          [Bindable]private var id1:String;

                          [Bindable]private var thumbimage:String;

                          [Bindable]private var largeimage:String;

                         

                          private function init():void

                          {

                              pgImage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);

                              this.addEventListener( TransformGestureEvent.GESTURE_SWIPE, handleSwipe );

                              var thisbpage:Bookpage = data as Bookpage;

                              id1 = thisbpage.id;

                              largeimage = thisbpage.largeimage;

                          }

                         

                          private function onZoom(event:TransformGestureEvent):void

                          {

                              var mySprite:Sprite = pgImage as Sprite;

                              if(mySprite.scaleY.valueOf() >= 1)

                              {

                                  mySprite.scaleX *= event.scaleX;

                                  mySprite.scaleY *= event.scaleY;

                              }

                              else

                              {

                                  mySprite.scaleX = 1;

                                  mySprite.scaleY = 1;

                              }

                          }

                         

                          private function handleSwipe(event:TransformGestureEvent):void

                          {

                              // Swipe was to the right

                              if (event.offsetX == 1 ) {

                                  // push the PreviousView without any data using default

                                some help here. pls ..swipe to prev image if any

                                 

                              }

                                  // Swipe was to the left

                              else if (event.offsetX == -1 ) {

                                  // push the NextView withour any data using

                                  some help here. pls ..swipe to next in list

                              }   

                             

                              // Swipe was to the down

                              if (event.offsetY == 1 ) {

                                  // push the PreviousView without any data using default

                                  // ViewTransition

                                  this.actionBarVisible = true;

                              }

                                  // Swipe was to the up

                              else if (event.offsetY == -1 ) {

                                  // push the NextView withour any data using

                                  this.actionBarVisible = false;

                              }

                          }

                      ]]>

                  </fx:Script>   

                 

                  <fx:Declarations>

                      <s:SlideViewTransition id="slideUp" duration="300" direction="up" transitionControlsWithContent="false"/>

                  </fx:Declarations>

                 

                  <s:states>

                      <s:State name="portraitPhone" stateGroups="phone,portrait"/>

                      <s:State name="landscapePhone" stateGroups="landscape,phone"/>    

                  </s:states>   

                 

                  <s:actionContent>

                      <s:HGroup>

                      <s:Button icon="assets/qsearch.png" click="navigator.popView(slideUp)"/>

                      <s:Button icon="assets/prev.png"/>

                      <s:Button icon="assets/next.png"/>

                      </s:HGroup>

                  </s:actionContent>

                 

                 

                  <s:Scroller x="0" y="0" width="100%" height="100%" >

                      <s:HGroup>

                          <s:Image id="pgImage" left="0" top="11" source="assets/gallery/{largeimage}"  />

                      </s:HGroup>

                  </s:Scroller>

               

              </s:View>