Forums

Board index » YUI 3 Gallery Forums: » Gallery Forums » Carousel

Page 1 of 1   [ 7 posts ]
New Topic | Post Reply | Print view

Anna Hales

  • Username: AnnaHales
  • Joined: Mon Dec 13, 2010 8:36 am
  • Posts: 8
  • Offline
  • Profile
Tags:

AutoPlay on YUI3 Carousel

Post Posted: Wed Apr 27, 2011 12:36 am
+0-
Hi Gopal,

I wonder if you could help; I can't seem to get AutoPlay to work on my YUI3 carousel. I have the following code:

Code:
YUI({gallery: 'gallery-2011.03.23-22-20'}).use("gallery-carousel", "substitute", "gallery-carousel-anim",  function (Y) {
   Y.on("contentready", function () {
      var carousel = new Y.Carousel({
         boundingBox: "#gallery-carousel",
         numVisible: 1,
         autoPlayInterval: 5000,
         isCircular: true,
         contentBox: "#gallery-carousel > ul"
      });

      carousel.plug(Y.CarouselAnimPlugin, { animation: { speed: 0.2, effect: Y.Easing.easeOut } });
      carousel.render();
      carousel.startAutoPlay();
   }, "#footer");
});


The console tells me that carousel.startAutoPlay is not a function, however, this worked in my YUI2 version of the carousel.
I'd appreciate any help.
Thanks

crazyturkish

  • Joined: Mon Feb 14, 2011 5:07 pm
  • Posts: 3
  • Offline
  • Profile
Tags:

Re: AutoPlay on YUI3 Carousel

Post Posted: Fri May 13, 2011 5:29 pm
+0-
Hey Anna,

Add following code piece right before [Y.on("contentready"...] statement

Code:
Y.Carousel.prototype.startAutoPlay = function() {
   var B = this;
   u = B.get("autoPlayInterval");
   setInterval (doScrollForward, u);
   function doScrollForward() {
      B.scrollForward();
   }
}


or your full code should be line this:
Code:
YUI({gallery: 'gallery-2011.03.23-22-20'}).use("gallery-carousel", "substitute", "gallery-carousel-anim",  function (Y) {
   //add startAutoPlay method to Carousel widget's prototype
   Y.Carousel.prototype.startAutoPlay = function() {
      var B = this;
      u = B.get("autoPlayInterval");
      setInterval (doScrollForward, u);
      function doScrollForward() {
         B.scrollForward();
      }
   }


 
   Y.on("contentready", function () {
      var carousel = new Y.Carousel({
         boundingBox: "#gallery-carousel",
         numVisible: 1,
         autoPlayInterval: 5000,
         isCircular: true,
         contentBox: "#gallery-carousel > ul"
      });

      carousel.plug(Y.CarouselAnimPlugin, { animation: { speed: 0.2, effect: Y.Easing.easeOut } });
      carousel.render();
      carousel.startAutoPlay();
   }, "#footer");
});


The function hasn't been implemented in the widget yet but it doesn't mean you can't add it!

I hope this helps.

rasyog

  • Username: rasyog
  • Joined: Wed May 11, 2011 3:26 pm
  • Posts: 3
  • IRC: rasyog
  • Offline
  • Profile

Re: AutoPlay on YUI3 Carousel

Post Posted: Sat May 14, 2011 3:18 pm
+0-
Hi Anna,

Any luck with getting Autoplay working? If so, would you mind sharing your code? I am also having the same problem.

Anna Hales

  • Username: AnnaHales
  • Joined: Mon Dec 13, 2010 8:36 am
  • Posts: 8
  • Offline
  • Profile
Tags:

Re: AutoPlay on YUI3 Carousel

Post Posted: Tue May 17, 2011 7:14 am
+0-
Hi Crazyturkish,
Thanks so much for the help - I'm getting much closer to what I need.

However, I currently have issues with the 'gallery-carousel-anim' breaking the 'isCircular:true'.
I've got the code exactly as you stated, but commented out the
Code:
gallery-carousel-anim
and the
Code:
carousel.plug(Y.CarouselAnimPlugin, { animation: { speed: 0.2, effect: Y.Easing.easeOut } });
. The autoplay now works in the cyclical way I need, however, it goes at a crazy speed!

If you could recommend how to control the speed of the autoplay without using anim I would be so grateful.
Thanks again,
Anna

Anna Hales

  • Username: AnnaHales
  • Joined: Mon Dec 13, 2010 8:36 am
  • Posts: 8
  • Offline
  • Profile

Re: AutoPlay on YUI3 Carousel

Post Posted: Wed May 18, 2011 2:31 am
+0-
Got it - here is the code for autoplay on YUI3 Carousel
Code:
YUI({gallery: 'gallery-2011.03.23-22-20'}).use("gallery-carousel", "substitute", "gallery-carousel-anim",  function (Y) {
   //add startAutoPlay method to Carousel widget's prototype
   Y.Carousel.prototype.startAutoPlay = function() {
      var B = this;
      u = B.get("autoPlayInterval");
      setInterval (doScrollForward, u);
      function doScrollForward() {
        B.scrollForward();
      }
   }

   Y.on("contentready", function () {
      var carousel = new Y.Carousel({
         boundingBox: "#gallery-carousel",
         numVisible: 1,         
         isCircular: true,
         autoPlayInterval: 2000,
         contentBox: "#gallery-carousel > ul"
      });
      
        carousel.plug(Y.CarouselAnimPlugin, { speed: 1, effect: Y.Easing.easeOut } );
        carousel.render();
        carousel.startAutoPlay();
      
      var carouselNode = Y.one('#gallery-carousel li.first').removeClass('first');
      
   }, "#footer");   
});

rasyog

  • Username: rasyog
  • Joined: Wed May 11, 2011 3:26 pm
  • Posts: 3
  • IRC: rasyog
  • Offline
  • Profile
Tags:

Re: AutoPlay on YUI3 Carousel

Post Posted: Wed May 18, 2011 7:32 am
+0-
Anna, Thank you for sharing your code.

wasim117

  • Joined: Fri Aug 05, 2011 1:31 am
  • Posts: 3
  • Offline
  • Profile
Tags:

Re: AutoPlay on YUI3 Carousel

Post Posted: Tue Aug 09, 2011 1:28 am
+0-
Its working but the Problem is that, when we click on the item, timer is already continue and its move forward only one step only.
Page 1 of 1   [ 7 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
cron

Recent Forums Posts

Recent YUI Blog Posts

Online Users

No Users Online

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group