Permalink
Browse files

Implement RTL support (motivated by and based on http://rtl-this.com/…

  • Loading branch information...
jsor committed Jun 24, 2010
1 parent 22c1db0 commit c08b9cb61abd71394b644ccd175396c68da4f7e7
Showing with 61 additions and 5 deletions.
  1. +6 −0 index.html
  2. +11 −5 lib/jquery.jcarousel.js
  3. +22 −0 skins/ie7/skin.css
  4. +22 −0 skins/tango/skin.css
View
@@ -224,6 +224,12 @@ <h3>Configuration</h3>
<td>Specifies wether the carousel appears in horizontal or vertical orientation.
Changes the carousel from a left/right style to a up/down style carousel.</td>
</tr>
+ <tr>
+ <td>rtl</td>
+ <td>bool</td>
+ <td>false</td>
+ <td>Specifies wether the carousel appears in RTL (Right-To-Left) mode.</td>
+ </tr>
<tr>
<td>start</td>
<td>integer</td>
View
@@ -51,6 +51,7 @@
// Default configuration properties.
var defaults = {
vertical: false,
+ rtl: false,
start: 1,
offset: 1,
size: null,
@@ -100,8 +101,12 @@
this.buttonNext = null;
this.buttonPrev = null;
+ // Only set if not explicitly passed as option
+ if (!o || o.rtl === undefined)
+ this.options.rtl = ($(e).attr('dir') || $('html').attr('dir')).toLowerCase() == 'rtl';
+
this.wh = !this.options.vertical ? 'width' : 'height';
- this.lt = !this.options.vertical ? 'left' : 'top';
+ this.lt = !this.options.vertical ? (this.options.rtl ? 'right' : 'left') : 'top';
// Extract skin class
var skin = '', split = e.className.split(' ');
@@ -160,13 +165,14 @@
overflow: 'hidden',
position: 'relative',
top: 0,
- left: 0,
margin: 0,
padding: 0
- });
+ }).css((this.options.rtl ? 'right' : 'left'), 0);
this.container.addClass(this.className('jcarousel-container')).css({
position: 'relative'
});
+ if (!this.options.vertical && this.options.rtl)
+ this.container.addClass('jcarousel-direction-rtl').attr('dir', 'rtl');
var di = this.options.visible != null ? Math.ceil(this.clipping() / this.options.visible) : null;
var li = this.list.children('li');
@@ -682,7 +688,7 @@
this.list.css(this.lt, p + 'px');
scrolled();
} else {
- var o = !this.options.vertical ? {'left': p} : {'top': p};
+ var o = !this.options.vertical ? (this.options.rtl ? {'right': p} : {'left': p}) : {'top': p};
this.list.animate(o, this.options.animation, this.options.easing, scrolled);
}
},
@@ -812,7 +818,7 @@
format: function(e, i) {
var $e = $(e).addClass(this.className('jcarousel-item')).addClass(this.className('jcarousel-item-' + i)).css({
- 'float': 'left',
+ 'float': (this.options.rtl ? 'right' : 'left'),
'list-style': 'none'
});
$e.attr('jcarouselindex', i);
View
@@ -4,6 +4,10 @@
border: 1px solid #808080;
}
+.jcarousel-skin-ie7 .jcarousel-direction-rtl {
+ direction: rtl;
+}
+
.jcarousel-skin-ie7 .jcarousel-container-horizontal {
width: 245px;
padding: 20px 40px;
@@ -36,9 +40,15 @@
}
.jcarousel-skin-ie7 .jcarousel-item-horizontal {
+ margin-left: 0;
margin-right: 7px;
}
+.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-item-horizontal {
+ margin-left: 7px;
+ margin-right: 0;
+}
+
.jcarousel-skin-ie7 .jcarousel-item-vertical {
margin-bottom: 7px;
}
@@ -59,6 +69,12 @@
background: transparent url(next-horizontal.gif) no-repeat 0 0;
}
+.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-next-horizontal {
+ left: 5px;
+ right: auto;
+ background-image: url(prev-horizontal.gif);
+}
+
.jcarousel-skin-ie7 .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}
@@ -84,6 +100,12 @@
background: transparent url(prev-horizontal.gif) no-repeat 0 0;
}
+.jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-prev-horizontal {
+ left: auto;
+ right: 5px;
+ background-image: url(next-horizontal.gif);
+}
+
.jcarousel-skin-ie7 .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
View
@@ -4,6 +4,10 @@
border: 1px solid #346F97;
}
+.jcarousel-skin-tango .jcarousel-direction-rtl {
+ direction: rtl;
+}
+
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 245px;
padding: 20px 40px;
@@ -31,9 +35,15 @@
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
+ margin-left: 0;
margin-right: 10px;
}
+.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
+ margin-left: 10px;
+ margin-right: 0;
+}
+
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: 10px;
}
@@ -56,6 +66,12 @@
background: transparent url(next-horizontal.png) no-repeat 0 0;
}
+.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
+ left: 5px;
+ right: auto;
+ background-image: url(prev-horizontal.png);
+}
+
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}
@@ -81,6 +97,12 @@
background: transparent url(prev-horizontal.png) no-repeat 0 0;
}
+.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
+ left: auto;
+ right: 5px;
+ background-image: url(next-horizontal.png);
+}
+
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}

0 comments on commit c08b9cb

Please sign in to comment.