Magic Scroller

Ejemplo con imágenes

Código del ejemplo

Código Js para implementación del plugin

$(document).ready(function(){
	params = {
		mask:$('#images-mask'),
		elements:$('#images-mask img'),
		prevbtn:$('#prev-button'),
		nextbtn:$('#next-button'),
		displaytype:'column',
		elementsByRow:3,
		rowsDisplayed:2		
	};
	$('#images-container').magicScroller( params );
 });
						

código HTML

<div id="images-container">
	<div id="images-mask">
		<img src="imagenes/agujero.jpg" alt="naturaleza" />
		<img src="imagenes/desktop_20naturaleza.png" alt="naturaleza" />
		<img src="imagenes/images3.jpeg" alt="naturaleza" />
		<img src="imagenes/naturaleza.jpg" alt="naturaleza" />
		<img src="imagenes/naturaleza1.jpg" alt="naturaleza" />
		<img src="imagenes/naturaleza5.jpg" alt="naturaleza" />
		<img src="imagenes/naturaleza18.jpg" alt="naturaleza" />
		<img src="imagenes/naturaleza_en_azul.jpg" alt="naturaleza" />
		<img src="imagenes/naturaleza-viva-517.jpg" alt="naturaleza" />
		<img src="imagenes/naturalezax.jpg" alt="naturaleza" />
		<img src="imagenes/naturalezax2.jpg" alt="naturaleza" />
		<img src="imagenes/naturalezaxx.jpg" alt="naturaleza" />
		<img src="imagenes/naturaleza-y-vida-en-lierganes-582.jpg" alt="naturaleza" />
		<img src="imagenes/natural-light-yonover.jpg" alt="naturaleza" />
		<img src="imagenes/turismo-naturaleza-madrid.jpg" alt="naturaleza" />
	</div><!-- images-mask -->
</div><!-- image-container -->
<div id="flechas">
	<a id="prev-button" href="#" class="button">
		<img src="styles/img/up.jpg" alt="up" />
	</a>
	<div id="separator"></div>
	<a id="next-button" href="#" class="button">
		<img src="styles/img/down.jpg" alt="down" />
	</a>
</div><!-- flechas -->
						

Código CSS

#images-container{
	height:430px;
	width:860px;
	float:left;
}
 
#images-container #images-mask{
	height:430px;
	width:860px;
	overflow: hidden;
}
 
#images-container #images-mask img{
	width:280px;
	height:210px;
}
 
#flechas{
	float:left;
	height:430px;
	width:50px;
	overflow:hidden;
	background:none repeat scroll 0 0 #FFFFFF;
	border:1px solid #AAAAAA;
}
 
#separator{
	height:350px;
	width:50px;
}
 
#flechas .button{
	height:50px;
	height:40px;
	opacity:.8;
}
 
#flechas .button:hover{
	opacity:1;
}
						

Descargar

http://plugins.jquery.com/project/magicScroller

Especificaciones

Opciones de configuración

displaytype:

Define el efecto en que se mostrarán los elementos, de uno por uno, por culumna, o por fila, valores ["one"|"column"|"row"] , default "one"

elementsByRow:

Número elementos que contiene cada fila, Default 3

topSeparator:

Número de pixeles de separación de los elementos en la parte superior default 5

leftSeparator:

Número de pixeles de separación de los elemntos por la izquierda default 3

delayTime.

Tiempo en milisegundos que tarda en salir el siguiente elemento, o conjunto de elementos default 500

animationTime:

Tiempo en milisegundos que dura la animación en mostrar el elemento default 1000

rowsDisplayed

Número de filas que se mostrarán cada que se da siguiente, default 2

Propiedades y eventos

$.fn.magicScroller.needed.[ cualquier opción de configuración] = 'valor'

Cambia cualquier propiedad de configuración

$.fn.magicScroller.initializeAll()

Reinicia todo el scroll