Lof JSliderNews jQuery Plugin - Now with RTL Support

I've received a request asking to add RTL support to a jQuery slider plugin called Lof JSliderNews Plugin . Adding the RTL support was so simple and easy. Here's how it went:

1. Adding the rtloption

First thing I did is adding the rtl option to the settings object of the plugin.

this.settings = {
	direction : '',
	mainItemSelector  : 'li',
	navInnerSelector	: 'ul',
	navSelector : 'li' ,
	navigatorEvent : 'click'/* click|mouseenter */,
	wapperSelector:  '.sliders-wrap-inner',
	interval : 5000,
	auto  : false, // whether to automatic play the slideshow
	maxItemDisplay	 : 3,
	startItem : 0,
	navPosition : 'vertical',/* values: horizontal|vertical*/ 
	navigatorHeight	 : 100,
	navigatorWidth : 310,
	duration : 600,
	navItemsSelector : '.navigator-wrap-inner li',
	navOuterSelector  : '.navigator-wrapper' ,
	isPreloaded : true,
	easing : 'easeInOutQuad',
	onPlaySlider:function(obj, slider){},
	onComplete:function(slider, index){  }
	,rtl:false
}	

This will make you turn on the RTL mode when initializing the plugin:

 $('#jslidernews1').lofJSidernews( { rtl:true} );	

2. Update the Plugin's JavaScript

Scan the plugin's JS for any "directional" statements and flip them based on the rtl setting. This plugin had only 3:
1.

this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );

...will be:

if(this.settings.rtl)
	this.wrapper.css({'right':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
else
	this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );

2.

return ['left', this.settings.navigatorWidth];

...will be:

if(this.settings.rtl)
	return ['right', this.settings.navigatorWidth];
else
	return ['left', this.settings.navigatorWidth];

3.

return ['left','width'];

...will be:

if(this.settings.rtl)
	return ['right','width'];
else
	return ['left','width'];

3. RTL the CSS

The CSS is really simply and most of it is "design/style" related. I've created -rtl.css files that flipped the directional CSS rules in each one. For example, in style1.css, the slider layout section will be in the style1-rtl.css file:

/* slider layout */
.lof-slidecontent .preload{	left:auto;	right:0;	}
.lof-slidecontent  ul.sliders-wrap-inner li{float:right;}
.lof-slidecontent  .lof-opacity  li{left:auto;	right:0; }
.lof-slidecontent  .navigator-content { right:auto; left:10px;}
.lof-slidecontent  .navigator-wrapper{float:right}
.lof-slidecontent  ul.navigator-wrap-inner li{ margin-right:0px;float:right;}

4. Enabling the RTL mode

We'll make use of the changes we made by :

1. Linking the new RTLed CSS files:

2. Enabling the rtl option in the initialization code:

   $('#jslidernews1').lofJSidernews( { interval : 4000,
   						direction	: 'opacitys',	
   						easing: 'easeInOutExpo',
   						duration: 1200,
   						auto	: true,
   						maxItemDisplay  : 4,
   						navPosition  : 'horizontal', // horizontal
   						navigatorHeight : 32,
   						navigatorWidth  : 80,
   						mainWidth	: 980,
   						buttons	: buttons 
   						,rtl:true} );	
   						});
   

5. Enjoy =)

You can download the source and view the demo through the buttons below.
Feel free to share your feedback in the comments below(especially if it doesn't work)
Thank you Ramyh for the request.