iBox Ventana modal muy liviana

Hace tiempo que lo vi en Vagabundia y no podía dejar de probar iBox, una ventana modal muy liviana, similar a Lytebox pero con la posibilidad de poder añadir vídeos de YouTube.
Para añadir iBox podemos descargar los archivos necesarios desde la página o bien descargando este ZIP donde amablemente J.Miur ha adaptado y modificado los archivos para Blogger y pone a disposición de todos.

J.Miur nos proporciona en el ZIP dos archivos CSS que son dos modelos diferentes de visionar la ventana modal, cualquiera de ellos es válido y podemos probar para ver cual se ajusta a nuestro gusto antes de decidirnos.

Para utilizar los archivos del ZIP extraemos darkbox.css, lightbox.css y ibox.js .Una vez tenemos los archivos los alojamos en nuestro servidor y los añadimos a nuestra plantilla justo antes de </head> de la siguiente forma:

<script type="text/javascript" src="URL_ibox.js"></script>
<link rel="stylesheet" href="URL_lightbox.css" type="text/css" media="screen"/>

Añadidos los scripts a la plantilla podemos ver en funcionamiento la ventana modal cuando agregamos el atributo rel="ibox" a cualquier enlace.


Imagen-icono:
<a href="URL_imagen" rel="ibox" title="Texto optativo">texto o imagen de enlace </a>



Un documento:
<a href="URL_pagina" rel="ibox" title="Texto optativo">texto o imagen de enlace</a>



Un vídeo:
<a href="http://www.youtube.com/watch?v=(aquí más código)" rel="ibox">texto o imagen de enlace</a>





Una imagen Contenido oculto Un vídeo






Para añadir una imagen o icono para enlazar bastará con sustituir donde dice "texto o imagen de enlace" por <img src="url-de-la-imagen">
Esto es sólo un ejemplo, en Vagabundia encontraréis información más detallada sobre iBox y variaciones para configurarlo.

0 comentarios:

Publicar un comentario