( function( $ ) {
$.fn.imageScroller = function ( options ) {
return this.each( function() {
var $this = $( this );
var loadImgs = 0;
var opt = $.extend(
{
speed: "3000"
, loading: "Leyendo imágenes..."
, direction: "left"
}
, options || {}
);
$this.children().hide();
$this.append(
"
" +
"
" + opt.loading + "
" +
"
"
);
$( "img" , $this ).each(
function () {
var img = new Image();
var soc = $( this ).attr( 'src' );
$( img ).load(
function () {
loadImgs++;
}
).attr( "src" , soc );
}
);
var intVal = window.setInterval(
function () {
if ( loadImgs == $( "img" , $this ).length ) {
window.clearInterval( intVal );
$( "#loading" ).remove();
$this.children().show();
var totImg = 0;
$.each(
$this.children( ":not(div)" )
, function () {
switch ( opt.direction ) {
case 'left':
case 'right':
if ( $( this ).children().length ) {
$( this ).width( $( this ).children( ":eq(0)" ).width() );
}
totImg += $( this ).width();
break;
case 'top':
case 'bottom':
$( this ).css( "display" , "block" );
if ( $( this ).children().length ) {
$( this ).height( $( this ).children( ":eq(0)" ).height() );
}
totImg += $( this ).height();
break;
}
$( this ).css({
margin: "0px"
, padding: "0px"
, clear: "both"
});
$( this ).bind(
"mouseover"
, function () {
$( "div:eq(0)" , $this ).stop();
}
).bind(
"mouseout"
, function () {
scrollStart( $( "div:eq(0)" , $this ) , opt );
}
);
$( "div:eq(0)" , $this ).append( $( this ) );
}
);
switch ( opt.direction ) {
case 'left':
$( "div:eq(0)" , $this ).css( "width" , totImg + "px" );
break;
case 'right':
$( "div:eq(0)" , $this ).css( "width" , totImg + "px" );
$( "div:eq(0)" , $this ).css({
marginLeft: -( totImg - $this.width() ) + "px"
});
break;
case 'top':
$( "div:eq(0)" , $this ).css( "height" , totImg + "px" );
break;
case 'bottom':
$( "div:eq(0)" , $this ).css( "height" , totImg + "px" );
$( "div:eq(0)" , $this ).css({
marginTop: -( totImg - $this.height() ) + "px"
});
break;
}
scrollStart( $( "div:eq(0)" , $this ) , opt );
}
}
, 100
);
function scrollStart ( $scroll , opt ) {
switch ( opt.direction ) {
case 'left':
var pos = -( $scroll.children( ":eq(0)" ).width() );
var spd = opt.speed - ( Math.abs ( parseInt( $scroll.css( "marginLeft" ) ) ) * ( opt.speed / $scroll.children( ":eq(0)" ).width() ) );
break;
case 'right':
var pos = -( $scroll.width() - $scroll.parents( "div:eq(0)" ).width() ) + $scroll.children( ":last" ).width();
var spd = opt.speed - ( ( $scroll.children( ":last" ).width() - ( Math.abs ( parseInt( $scroll.css( "marginLeft" ) ) ) - Math.abs ( pos ) ) ) * ( opt.speed / $scroll.children( ":last" ).width() ) );
break;
case 'top':
var tos = -( $scroll.children( ":eq(0)" ).height() );
var spd = opt.speed - ( Math.abs ( parseInt( $scroll.css( "marginTop" ) ) ) * ( opt.speed / $scroll.children( ":eq(0)" ).height() ) );
break;
case 'bottom':
var tos = -( $scroll.height() - $scroll.parents( "div:eq(0)" ).height() ) + $scroll.children( ":last" ).height();
var spd = opt.speed - ( ( $scroll.children( ":last" ).height() - ( Math.abs ( parseInt( $scroll.css( "marginTop" ) ) ) - Math.abs ( tos ) ) ) * ( opt.speed / $scroll.children( ":last" ).height() ) );
break;
}
$scroll.animate(
{
marginLeft: ( pos || "0" ) + "px"
, marginTop: ( tos || "0" ) + "px"
}
, spd
, "linear"
, function () {
switch ( opt.direction ) {
case 'left':
$scroll.append( $( this ).children( ":eq(0)" ) );
$scroll.css( "marginLeft" , "0px" );
break;
case 'right':
$scroll.prepend( $( this ).children( ":last" ) );
$scroll.css( "marginLeft" , -( $scroll.width() - $scroll.parents( "div:eq(0)" ).width() ) + "px" );
break;
case 'top':
$scroll.append( $( this ).children( ":eq(0)" ) );
$scroll.css( "marginTop" , "0px" );
break;
case 'bottom':
$scroll.prepend( $( this ).children( ":last" ) );
$scroll.css( "marginTop" , -( $scroll.height() - $scroll.parents( "div:eq(0)" ).height() ) + "px" );
break;
}
scrollStart( $scroll , opt );
}
);
};
});
};
})(jQuery);