aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

jQuery.ascensor.js, es un plugin jQuery que nos permite convertir el plugin jQuery.scrollTo() en un ascensor 😀

Instalación

Lo primero que debemos tener en cuenta es que el plugin, obviamente, requiere jQuery y que además necesita de scrollTo() para funcionar, así que tendremos que cargarlos antes de llamar al plugin.

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script> 
<script src="js/jquery.ascensor.js" type="text/javascript"></script>
<script src="js/myscript.js" type="text/javascript"></script>

Visión de arquitecto

Una vez cargado, debemos tener en cuenta nuestro HTML ya que necesitaremos ver nuestro código como si de un edificio de N plantas se tratara.

<div id="house">
        <div>
                <div id="piso1"></div><!-- Contenido del piso 1-->
        </div>
        <div> 
                <div id="piso2"></div><!-- Contenido del piso 2-->
        </div>
        <div>
                <div id="piso3"></div><!-- Contenido del piso 3-->
        </div>  
        <div>
                <div id="piso4"></div><!-- Contenido del piso 4-->
        </div>
        <div>
                <div id="piso5"></div><!-- Contenido del piso 5-->
        </div>
</div>

Y una vez ya definido el contenido en los diferentes pisos indicaremos al plugin ascensor() que le aplique el scroll dinámico que buscamos.

$('#house').ascensor();

Opciones y más opciones

Con lo anterior ya tendríamos funcionando una versión simple del uso de jQuery.ascensor(), pero aún podemos utilizar una gran cantidad de parámetros que nos permitirán personalizar completamente nuestras transiciones.

$('#house').ascensor({
                                        
        AscensorName:'house',
                //Es posible usar id's o clases (default:'maison')
        WindowsFocus:true,
                //Si empezamos en el primer piso(default:true)
        WindowsOn:'0',
                // Si empezamos en cualquier otro piso
        Direction:'y',
                //Dirección en la que va el "ascensor"
        NavigationDirection:'xy',
                //Lo que será la dirección de navegación(par défaut:'xy')
	Navig:true,
		//Nos permite añadir un sistema de navegación	
	Link:true,
		//Si necesitamos un link por piso hacia el siguiente piso
	PrevNext:true,
		//Botones prev/next
	KeyArrow:false,
		//Activamos o desactivamos las flechas	
	keySwitch:false,
		//Activamos o desactivamos la navegación por flechas.
	CSSstyles:true,
		// Si necesitamos un plugin CSS por defecto
	ReturnURL:true,
		//Si necesitamos un URL por páginca
	ReturnCode:true,
		//Nos ofrece id y class para navig/link/content  
	ChocolateAscensor:true,
		//Si necesitas estar en todos los pisos
	AscensorMap: '4|3',
	   //Define el tamaño del mapa
	ContentCoord:'1|1 & 2|2 & 1|2 & 3|4 & 1|3 & 3|1 & 2|3'	
		// Define las posiciones X y Y de cada piso dentro del mapa
});

Interesante herramienta para preparar presentaciones online.