Forums

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

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

weimer

  • Joined: Mon Dec 20, 2010 4:13 pm
  • Posts: 1
  • Offline
  • Profile
Tags:

Trouble making the example work...

Post Posted: Mon Dec 20, 2010 4:20 pm
+0-
Hi,

I came here based on the blog post on the yui blog. However, I have trouble making even the example given there work. My code looks like this:
Code:
<html>
<head>
   <script type="text/javascript" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>   
</head>
<body>
   <div class="carousel" id="container">
      <ol>
         <li><img src="http://static.flickr.com/5006/5265039009_f92b60ffc6_m.jpg"></li>
         <li><img src="http://static.flickr.com/5163/5265038529_b35a4f497e_m.jpg"></li>
         <li><img src="http://static.flickr.com/5008/5265644686_712fde3f34_m.jpg"></li>
         <li><img src="http://static.flickr.com/5241/5265037365_8679d00d49_m.jpg"></li>
      </ol>
   </div>
   <script type="text/javascript" charset="utf-8">
      YUI({gallery: 'gallery-2010.10.20-19-33'}).use("gallery-carousel", "gallery-carousel-anim", "substitute", function(Y) {
        var carousel = new Y.Carousel({ boundingBox: "#container", contentBox: "#container > ol", numVisible: 2});
        carousel.plug(Y.CarouselAnimPlugin,{animation:{speed: 0.7}});
        carousel.render();
      });
   </script>   
</body>
</html>


The result I see in both Chrome and Safari is that it adds some buttons and stuff to the page, but there is no carousel and the images are still in a ol.

Any idea what is going on?

Thanks!

Markus

sdeva

  • Joined: Fri Jan 07, 2011 3:45 am
  • Posts: 2
  • Offline
  • Profile
Tags:

Re: Trouble making the example work...

Post Posted: Fri Jan 07, 2011 3:53 am
+0-
With small changes it worked for me,
1. Set the body class to yui3-skin-sam
2. Force Include gallery-carousel.css, as specified by gopal in his usage sample.

http://pastie.org/1436933

matthieu bosquet

  • Username: neiges
  • Joined: Thu Jan 06, 2011 2:29 am
  • Posts: 4
  • Offline
  • Profile
Tags:

Re: Trouble making the example work...

Post Posted: Tue Jan 11, 2011 12:46 am
+0-
Hi,
I think, one problem is, if the images are not completely loaded, the styles generated by the carousel are completely messed up.
Just fire the carousel on domready event :

+- Y.on("available", function(e) {

aseel q

  • Username: aseelq
  • Joined: Tue Mar 22, 2011 12:16 am
  • Posts: 1
  • Offline
  • Profile
Tags:

Re: Trouble making the example work...

Post Posted: Tue Mar 22, 2011 1:57 am
+0-
sdeva wrote:
With small changes it worked for me,
1. Set the body class to yui3-skin-sam
2. Force Include gallery-carousel.css, as specified by gopal in his usage sample.

http://pastie.org/1436933



Hi,
I was used this available link for the carousel component YUI3, and it’s working well but I have 1 issues, which is the carousel display and repeat the last element and add another page contain this last element again, is there any solution for this bug , here below my code:

.....................................
........... .................
<body class="yui3-skin-sam">
<div class="carousel" id="container">
<ol>
<li><img src="http://static.flickr.com/5006/5265039009_f92b60ffc6_m.jpg"></li>
<li><img src="http://static.flickr.com/5163/5265038529_b35a4f497e_m.jpg"></li>
<li><img src="http://static.flickr.com/5008/5265644686_712fde3f34_m.jpg"></li>
<li><img src="http://static.flickr.com/5241/5265037365_8679d00d49_m.jpg"></li>
</ol>
</div>
</body>

<script type="text/javascript">
<!-- Carousel Script -->
YUI({gallery: 'gallery-2010.10.20-19-33'}).use("gallery-carousel", "gallery-carousel-anim", "substitute", function(Y) {
Y.on("available", function(e) {
var carousel = new Y.Carousel({ boundingBox: "#container", contentBox: "#container > ol", numVisible: 4/*, numItems:4*/});
<!--carousel.plug(Y.CarouselAnimPlugin,{animation:{speed: 0.7}});-->
carousel.render();
}, "#container");
});
<!-- /Carousel Script -->
</script>
..............
...................................


Thanks in advance
Aseel
Page 1 of 1   [ 4 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

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