Skip to content

Instantly share code, notes, and snippets.

@rambuvn
Created May 26, 2012 17:35
Show Gist options
  • Save rambuvn/2794734 to your computer and use it in GitHub Desktop.
Save rambuvn/2794734 to your computer and use it in GitHub Desktop.
a simple slider by jquery, get all img in a container then make slider with this. How to perfect it, please!
(function($){
$.fn.rb_slider = function(i) {
if( i ){
this.rb_slider_zoom_in(!i);
}else{
this.rb_slider_zoom_out(!i);
}
}
$.fn.rb_slider_zoom_in = function(i){
obj = this;
image = this.find('img').last();
$(image).css( { 'width':'120%','height':'120%','left':'-10%','top':'-10%' });
$(image).animate({ width : '100%', height: '100%',left : '0%', top : '0%' },5000,function(){
obj.rb_slider_continue( $(this),i );
});
}
$.fn.rb_slider_zoom_out = function(i){
obj = this;
image = this.find('img').last();
$(image).css( { 'width':'100%','height':'100%', 'left' : 0, 'top' : 0 });
$(image).animate({ width : '120%', height: '120%',left : '-10%', top : '-10%' },5000,function(){
obj.rb_slider_continue( $(this),i );
});
}
$.fn.rb_slider_continue = function(img, i){
obj = this;
$this = $(img);
$this.animate({ opacity : 0 },2000,function(){
obj.prepend($this);
if( i ){
obj.find('img').first().css( {'display':'block', 'opacity' : 1, 'width':'120%','height':'120%','left':'-10%','top':'-10%' });
}else{
obj.find('img').first().css( {'display':'block', 'opacity' : 1,'width':'100%','height':'100%', 'left': 0, 'top' : 0 });
}
obj.rb_slider(i);
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment