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.
5 comentarios, 0 referencias
+
#