Magic Scroller

Примеры изображений

Пример кода

Исполнение плагина

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

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