YoxView es un visualizador de imágenes con jQuery. Es muy vistoso, el efecto conseguido es similar al Lightbox pero algo renovado en apariencia y animación y además es muy sencillo de implementar.
Principales características:
- Redimensiona las imágenes para que cuadren dentro de la ventana del navegador.
- Las imágenes pueden ser guardadas con anterioridad en la caché.
- Soporta múltiples instancias en la misma página.
- Es personalizable, permitiendo incluso que varias instancias en una misma página tengan una apariencia diferente.
- Soporta varios idiomas y escritura bidireccional.
- En modo slideshow habilitado, reproduce las imágenes automáticamente.
- Soporta navegación de imágenes por teclado.
- Es amigable con los motores de búsquedas para conseguir así buen posicionamiento de las imágenes.
- Si dudas unos de los puntos más fuerte es su fácil integración ya que no hace falta tener conocimientos sobre jQuery.
Implementación
Primero tenemos que poner las imágenes en miniatura (thumbnail) en un contenedor HTML:
<div class="yoxview">
<a href="images/01_full.jpg"><img src="images/01_thumbnail.jpg" alt="First image" /></a>
<a href="images/another_full.jpg"><img src="images/a_thumbnail.png" alt="Second image" /></a>
</div>
Segundo tenemos que enlazar la el archivo JS en la sección HEAD del código HTML de la página:
<script type="text/javascript" language="javascript" src="yoxview/yoxview-init.js"></script>
Tercero tenemos que editar el archivo que acabamos de enlazar y agregar la ruta del archivo en la variable yoxviewPath:
yoxviewPath = "yoxview/";
En el mismo archivo, debemos quitar el comentario a la línea:
LoadScript(yoxviewPath + "yoxview-nojquery.js");
Opciones de configuración
Las opciones de personalización incluyen: definir el color del fondo (background) y la opacidad del mismo, el tiempo para el autoplay, el idioma, etc.
$("#thumbnails").yoxview( {backgroundColor: 'Blue', playDelay: 5000} );YoxView
Sitio/descargar: www.yoxigen.com/yoxview/Default.aspx
Hola Tom, lamento mucho que pienses que el artículo es copiado, solo que no he tenido tiempo de responder por razones personales. Este post es una traducción libre del original que está en inglés. YoxView incluye todas las instrucciones actualizadas (ha habido cambios) en el zip que contiene todos los archivos necesarios para su implementación.
Saludos.
YoxView ha sido actualizado desde que se escribió esta entrada, por lo que la forma de instalarlo ha cambiado. Las nuevas intrucciones se encuentran en el archivos install.html
Obviamente este tuto es un copy paste y ni idea de lo que se está poniendo, la pregunta que se te hizo nunca fué respondida.
“…Tercero tenemos que editar el archivo que acabamos de enlazar y agregar la ruta del archivo en la variable yoxviewPath:..”
LA RUTA DE QUE ARCHIVO SE AGREGA?, LA DEL MISMO ARCHIVO QUE ESTÁS EDITANDO, ES DECIR SE REFERENCIA A SÍ MISMO?, NO SE ENTIENDE.
“yoxviewPath” APARECE VARIAS VECES, EN TODO CASO DÓNDE SE AGREGA LA RUTA?
GRACIAS