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.
Thanks
[…] 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 […]
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
Gracias por la info.
Pero no le encuentro la forma de mostrar varias instancias.
Por ejemplo para varios posts en un blog.
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
Hola Paola,
te agradeceria nos pases una url donde se pueda ver la aplicacion corriendo, tal vez estas llamando mal un script.
Saludos cordiales.
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
Buenos enlaces, gracias!!!!
Os paso otro enlace que suelen poner cosas interesantes
http://www.ankestudio.com/blog.html
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.