Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

CarouselRTLPlugin (gallery-carousel-rtl) on cdn

Last Updated: 06/2/11

+ 1 -

Amjad Masad

YUI Contributor

See 1 more by this user.

Created: 05/5/11
Last CDN Push: 06/1/11
Build Tag: gallery-2011.06.01-20-18
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

Carousel RTL Plugin

Adds right to left direction, behavior and animation support to the carousel module.

Not many tools and widgets on the web support the "right to left" direction even-though many languages are written that way which include Arabic, Persian, Urdu, Hebew and many more..

Tags:
amasad

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head> 
    <script type="text/javascript"
        src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"
        charset="utf-8"> 
    </script> 
<meta charset=utf-8 /> 
<title>Carousel RTL</title> 
<style> 
    .yui3-carousel-content li { width: 50px; }
    body {direction: rtl;}
</style> 
</head> 
<body class="yui3-skin-sam"> 
    <div id="container" class="yui3-carousel-loading"> 
        <ol> 
            <li>&#1608;&#1575;&#1581;&#1583;</li> 
            <li>&#1575;&#1579;&#1606;&#1575;&#1606;</li> 
            <li>&#1579;&#1604;&#1575;&#1579;&#1577;</li> 
            <li>&#1571;&#1585;&#1576;&#1593;&#1577;</li> 
            <li>&#1582;&#1605;&#1587;&#1577;</li> 
        </ol> 
    </div> 
<script> 
YUI({
 
    // latest gallery build
    gallery: 'gallery-2011.06.01-20-18'
 
    // include the carousel module, and the rtl plugin
}).use("gallery-carousel","gallery-carousel-rtl", function(Y) {
 
    // when the DOM is ready for manipulation load the carousel
    Y.on("contentready", function() {
 
        // instantiate the orginal carousel
        var carousel = new Y.Carousel({
            boundingBox: "#container",
            contentBox: "#container > ol",
            isCircular: true
        });
 
        // plugin the RTL plugin
        carousel.plug(Y.CarouselRTLPlugin, {
            // specify animation options
            animation: {
                speed: 0.5,
                effect: Y.Easing.backIn 
            }
        });
        // finally render the carousel
        carousel.render();
    }, "#container");
});
</script> 
</body> 
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head> 
    <script type="text/javascript"
        src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"
        charset="utf-8"> 
    </script> 
<meta charset=utf-8 /> 
<title>Carousel RTL</title> 
<style> 
    .yui3-carousel-content li { width: 50px; }
    body {direction: rtl;}
</style> 
</head> 
<body class="yui3-skin-sam"> 
    <div id="container" class="yui3-carousel-loading"> 
        <ol> 
            <li>&#1608;&#1575;&#1581;&#1583;</li> 
            <li>&#1575;&#1579;&#1606;&#1575;&#1606;</li> 
            <li>&#1579;&#1604;&#1575;&#1579;&#1577;</li> 
            <li>&#1571;&#1585;&#1576;&#1593;&#1577;</li> 
            <li>&#1582;&#1605;&#1587;&#1577;</li> 
        </ol> 
    </div> 
<script> 
YUI({
  
    // latest gallery build
    gallery: 'gallery-2011.06.01-20-18'
  
    // include the carousel module, and the rtl plugin
}).use("gallery-carousel","gallery-carousel-rtl", function(Y) {
  
    // when the DOM is ready for manipulation load the carousel
    Y.on("contentready", function() {
        
        // instantiate the orginal carousel
        var carousel = new Y.Carousel({
            boundingBox: "#container",
            contentBox: "#container > ol",
            isCircular: true
        });
      
        // plugin the RTL plugin
        carousel.plug(Y.CarouselRTLPlugin, {
            // specify animation options
            animation: {
                speed: 0.5,
                effect: Y.Easing.backIn 
            }
        });
        // finally render the carousel
        carousel.render();
    }, "#container");
});
</script> 
</body> 
</html>

Forum Posts

No forum posts for this module.