1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    11
    Vote Rating
    0
    DaveyJJ is on a distinguished road

      0  

    Default Answered: Final (I hope) Carousel example question

    Answered: Final (I hope) Carousel example question


    I have the following code working properly (which, for a designer, is good progress) and I need to link to an internal image within the Carousel and load that ... let's say, image 4 of row 3.

    I can make external links such as URLs and mailto etc open fine, but how do I load (and go directly to) a specific image?

    Code:
    html: [
         '<div>',
         '<img class="my-carousel-item-img" src="', category, '-', j, '.jpg" />',
         '<div id="external_link">',
         '<a href="http://www.google.com">Open external link</a>',
         '</div>',
         '<div id="internal_link">',
         '<a href="????????">Load image 4 of row 3</a>',
         '</div>',
         '</div>'
    ]
    Thanks for any help.

  2. So basically you need to add a listener to the link and do a setActiveItem on the carousel to the appropriate item, you will also need to stop the event...

    Code:
    carousel.element.on({
        scope : carousel,
        click  : function(e, t) {
            var target = e.getTarget('a');
    
            if (target) {
                e.stopEvent();
                this.setActiveItem(...);
            }
        }
    });
    Just typing from memory but something like that.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You want a link to scroll to a certain image or to go to another item of the carousel?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    11
    Vote Rating
    0
    DaveyJJ is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    You want a link to scroll to a certain image or to go to another item of the carousel?
    Go to another item of the carousel. Suppose you have 4 rows of 12 images, 48 images in total. From image 2, I might want a link that goes to image 27. Then if you swipe horizontally, you'd go to 26 or 28, and a vertical swipe would take you into row 2 or 4 the way it works now.

    How you transition between 2 and 27 (just loading image 27 with a sudden appearance, for example) is fine for MVP.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So basically you need to add a listener to the link and do a setActiveItem on the carousel to the appropriate item, you will also need to stop the event...

    Code:
    carousel.element.on({
        scope : carousel,
        click  : function(e, t) {
            var target = e.getTarget('a');
    
            if (target) {
                e.stopEvent();
                this.setActiveItem(...);
            }
        }
    });
    Just typing from memory but something like that.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread