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:
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
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>
<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