YoxView : Excelente plugin para galería de imágenes con jquery

9
102

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.

9 COMMENTS

  1. hola esta info me ayudo de mucho es muy facil de entender el codigo y de reemplazarlo aka esta como estatico pero tbm es adaptable a usar con una bd bueno otra vez muchas gracias por facilitar este codigo

  2. BUenas, no me corre el Yoxview!!! Me aparecen las imagenes pero cuando hago click en alguna de ellas solo se agranda en otra pagina pero no me da el efecto… que hago?? Gracias

  3. Hola deseo utilizar este plugin pero no lo logro usar alguien puede ayudarme, se lo agradecería mucho mi correo es:kevinksoft@yahoo.es
    Gracias de antemano.

Comments are closed.