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

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.

También te puede interesar

9 Comments

  1. egis
    mar 31, 2010 @ 12:26:58

    Thanks

  2. YoxView - URIELMANIA
    abr 05, 2010 @ 18:18:28

    [...] quieres saber como instalarlo o mas informacion acerca de este plugin puedes visitar http://tednologia.com y si lo que quieres es ver como se ve puedes dar click en Ver [...]

  3. yor
    ago 05, 2010 @ 16:07:20

    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

  4. Perro
    oct 04, 2010 @ 16:26:02

    Gracias por la info.
    Pero no le encuentro la forma de mostrar varias instancias.
    Por ejemplo para varios posts en un blog.

  5. Paola
    oct 27, 2010 @ 06:56:25

    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

    • craftyman
      nov 08, 2010 @ 14:01:24

      Hola Paola,
      te agradeceria nos pases una url donde se pueda ver la aplicacion corriendo, tal vez estas llamando mal un script.

      Saludos cordiales.

  6. Daniel 0dissey
    ene 10, 2011 @ 04:23:45

    Hola que tal me gusto mucho la info pero no puedo visualizar las imágenes por favor me gustaría que me pudieran ayudar gracias

  7. ide
    mar 25, 2011 @ 18:06:24

    Buenos enlaces, gracias!!!!
    Os paso otro enlace que suelen poner cosas interesantes
    http://www.ankestudio.com/blog.html

  8. Kevin Eduardo
    nov 05, 2011 @ 19:56:50

    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.