Monteserín jQuery Plugins

Monteserin Gallery

Sencilla y ligera Galería de fotos estilo carrusel hecha con jQuery.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="monteserinGallery.js"></script>
<script type="text/javascript" >
$(function(){
   $(".monteserinGallery").monteserinGallery();
}); 
</script> 
<ul class="monteserinGallery">
 <li><img src="http://lorempixel.com/600/300"></li>
 <li><img src="http://lorempixel.com/600/300"></li> 
</ul> 

Ejemplos de uso:

$(".monteserinGallery1").monteserinGallery();

With overflow:hidden in the list:

$(".monteserinGallery3").monteserinGallery({
	initPosX 	: "0px",
	initPosY 	: "0px",
	endPosX  	: "0px",
	endPosY  	: "500px",
});
	

$(".monteserinGallery4").monteserinGallery({
	width:"700px",
	height:"700px"
});
	

$(".monteserinGallery5").monteserinGallery({
	initPosX 	: "-500px",
	initPosY 	: "0px",
	endPosX  	: "500px",
	endPosY  	: "0px",
	inTime		: 2500,
	outTime		: 2500,
	displayTime	: 4000
});

$(".monteserinGallery6").monteserinGallery({
	initPosX 	: "0",
	endPosX  	: "0"
});

Descarga.

Monteserín slider

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="monteserinSlider.js"></script>
<script type="text/javascript" >
$(function(){       $("#monteserinSlider1").monteserinSlider();
$("#monteserinSlider2").monteserinSlider({               
        fadeInTime:500,
        fadeOutTime:500,
        waitTime:5000        
});
});
</script>
<ul id="monteserinSlider1" class="monteserinSlider">
        <li>Ok</li>
        <li>this is the Monteserin Slider</li>        
        <li>...so...</li>
        <li>is great, yeah?</li>
     <li>happy you appreciate it</li>
</ul>

Si el slider que usamos va a cargar fotografías, para evitar que inicialmente se vean en una posición que no es la que corresponde, podemos asignarle el estilo display:none al li que contiene dicha imágen.

• Ok
• this is the Monteserin Slider
• …so…
• is great, yeah?
• happy you appreciate it

• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus earum quisquam accusamus commodi delectus vitae.
• Lorem ipsum dolor sit amet.
• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, velit officiis quidem adipisci itaque, ratione rerum sapiente inventore possimus, cumque id repudiandae nam perferendis error repellendus suscipit. Voluptatem atque, odio aspernatur asperiores nesciunt beatae quod at unde. Sed, dolorum, placeat.
• Lorem ipsum dolor sit amet, consectetur adipisicing.
• Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quidem quas voluptates. Veritatis molestiae amet dicta soluta iure reiciendis dolor, voluptates quam! Adipisci, maiores inventore sed aliquam eveniet a minus.

Descarga.