Magic Scroller

An images example

Sample code

Plugin implementation

$(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 );
 });
						

HTML Code

<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 -->
						

CSS Code

#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;
}
						

Download

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

Especifications

Cofiguration options

displaytype:

Defines how the elements will be displayed. Options: "one", "column", "row". default "one"

elementsByRow:

Defines how many elements contains each row, Default 3

topSeparator:

Defines the separation from the top of each element in pixels, default 5

leftSeparator:

Defines the separation from the left of each element in pixels, default 3

delayTime.

Defines the number of miliseconds to delay displaying the next element, default 500

animationTime:

Defines the number of miliseconds the animation takes, default 1000

rowsDisplayed

Defines the number of rows displayed upon 'next' button is clicked, default 2

Events and properties

$.fn.magicScroller.needed.[any configuration option] = 'value'

Changes any configuration value

$.fn.magicScroller.initializeAll()

Regenerate the scroll