Swipebox es un plugin jQuery del tipo lightbox pero que a diferencia de otros similares viene listo para ser utilizado en dispositivos móviles, tanto como móviles con pantallas táctiles o bien tablets, ademas de obviamente computadoras de escritorio.
Swipebox cuenta con un amplio soporte de gestos para móviles, algo que lo convierte en una excelente alternativa para la creación de sitios adaptables (responsive).
Otro punto a favor para su implementación es que acepta el uso del teclado para su perfecto control. Si hablamos de su estructura y construcción podemos destacar que se encuentra construido aprovechando la potencia de CSS, esto se refleja en como utiliza las propiedades CSS para realizar las distintas transiciones.
Su personalización es extremadamente sencilla ya que podemos modificar su visual fácilmente, ya sea cambiando los iconos o bien sus hojas de estilo.
Cuenta con total soporte para dispositivos con retina display. Ademas su compatibilidad es excelente: Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android y Windows Phone.
Ejemplo de Lightbox compatible con móviles:
Agregamos las bibliotecas necesarias a nuestro proyecto:
<script src="lib/jquery-1.9.0.js"></script> <script src="source/jquery.swipebox.min.js"></script>
Ahora las hojas de estilo:
<link rel="stylesheet" href="source/swipebox.css">
HTML:
<a href="big/image.jpg" class="swipebox" title="My Caption"> <img src="small/image.jpg" alt="image"> </a>
Y finalmente inicializamos el plugin:
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
En el sitio oficial del proyecto van a encontrar varios ejemplos más. Además de varias opciones para personalizar su ejecución.
Web: Swipebox
