YoxView es un plugin Opensource para jQuery que sirve para animar galerías de imágenes en forma de Lightbox, esta herramienta esta basada en el plugin Lightbox2 para PrototypeJS y mejorada.

Para utilizarlo basta con bajarse el zip en la Web Oficial.

El zip no viene con el archivo html, así que lo armaremos lo más simple para este ejemplo.

Paso 1: Incluir los archivos JS y CSS

Solo incluiremos un archivo Js y CSS, dentro del yoxview-init.js se encuentra un proceso para incluir la librería jQuery y otros componentes, la hoja de estilos servirá para la apariencia de la galería, luego inicializaremos el yoxview.

<script type="text/javascript" language="javascript" src="yoxview-init.js"></script>
<link href="yoxview.css" rel="Stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $(".yoxview").yoxview();
});
</script>

Paso 2: Estructura HTML

Como al inicializar el yoxview le pasamos por parámetro la clase “.yoxview” tendremos que hacer lo mismo en el html, agregar la clase “.yoxview” al div de la galería.

<div class="thumbnails yoxview">
    <a href="img/_fire.jpg">
    <img title="House on fire" src="img/fire.jpg"></a>
    <a href="img/_avocado.jpg">
    <img title="Avocado" src="img/avocado.jpg"></a>
    <a href="img/_flower.jpg">
    <img title="Yam flower" src="img/flower.jpg"></a>
    <a href="img/_amsterdam.jpg">
    <img title="Amsterdam" src="img/amsterdam.jpg"></a>
    <a href="img/_tomatoes.jpg">
    <img title="Cherry tomatoes" src="img/tomatoes.jpg"></a>
    <a href="img/_roses.jpg">
    <img title="Roses" src="img/roses.jpg"></a>
</div>

Esto es todo, solo falta probar el HTML en el navegador para ver que tan excelente queda.