Skip navigation
Currently Being Moderated

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

Apr 17, 2012 8:35 PM

Tags: #flash #flex #actionscript #builder

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>

 
Replies
  • Currently Being Moderated
    Apr 17, 2012 9:21 PM   in reply to 56231

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 3, 2013 5:50 AM   in reply to 56231

    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>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points