iBox es otro de esos scripts que permiten crear ventanas modales al estilo LightwIndow pero, con la ventaja de no requerir ni Prototype y Scriptaculous lo que lo hace más liviano a la hora de cargar las páginas. En ese sentido, es similar a Lytebox pero un poco mejor ya que no sólo incluye la posibilidad de ver imágenes y documentos, sino también videos de YouTube.
Descargamos los archivos necesarios desde la página principal. Luego, los alojamos en un servidor propio y los agregamos en la plantilla, justo antes de </head>:
Descargamos los archivos necesarios desde la página principal. Luego, los alojamos en un servidor propio y los agregamos en la plantilla, justo antes de </head>:
<script type="text/javascript" src="URL_ibox.js"></script> <link rel="stylesheet" href="URL_lightbox.css" type="text/css" media="screen"/>
En el ZIP hay dos archivos CSS que corresponden a dos modelos diferentes; puede usarse cualquiera de ellos.
Hay algunas opciones de configuración que pueden agregarse sin necesidad de editar los archivo, basta agregar los datos inmediatamente debajo de lo anterior:
Hay algunas opciones de configuración que pueden agregarse sin necesidad de editar los archivo, basta agregar los datos inmediatamente debajo de lo anterior:
<script type="text/javascript">
[ ... aquí van las opciones ... ]
</script>iBox.close_label = 'texto'; es el texto del enlace para cerrar la ventana, por defecto es 'Close'
iBox.padding = valor; es el tamaño mínimo del margen que rodea la ventana (por defecto es 100)
iBox.inherit_frames = valor; se utiliza para definir el contenido de IFRAMES (por defcto false)
iBox.tags_to_hide = array; es un conjunto de etiquetas que no serán mostradas cuando la ventana está visible (por defecto ['select', 'embed', 'object'])
iBox.default_width = valor; es el ancho de la ventana a menos que se especifique una (por defecto 450)
iBox.fade_in_speed = valor; es el tiempo en milisegundos que dura la animación entre que se hace click y se muestra la ventana (por defecto es 0)
Para usar este script, basta agregar el atributo rel="ibox" en cualquier enlace; por ejemplo, en una imagen:
iBox.padding = valor; es el tamaño mínimo del margen que rodea la ventana (por defecto es 100)
iBox.inherit_frames = valor; se utiliza para definir el contenido de IFRAMES (por defcto false)
iBox.tags_to_hide = array; es un conjunto de etiquetas que no serán mostradas cuando la ventana está visible (por defecto ['select', 'embed', 'object'])
iBox.default_width = valor; es el ancho de la ventana a menos que se especifique una (por defecto 450)
iBox.fade_in_speed = valor; es el tiempo en milisegundos que dura la animación entre que se hace click y se muestra la ventana (por defecto es 0)
Para usar este script, basta agregar el atributo rel="ibox" en cualquier enlace; por ejemplo, en una imagen:
<a href="URL_imagen" rel="ibox" title="Texto optativo">ENLACE o MINIATURA</a>
en un documento:
<a href="URL_pagina" rel="ibox" title="Texto optativo">ENLACE o MINIATURA</a>
en un video de YouTube:
<a href="http://www.youtube.com/watch?v=XXXXXXXXXXX" rel="ibox">ENLACE o MINIATURA</a>
Además, hay algunos argumentos que pueden utilizarse para configurar cada ventana según nuestras necesidades. Estos argumentos se agrean a la tributo rel, anteponiéndoles el símbolo &:
width=valor establece el ancho
height=valor establece el alto
target=url el destino del documento a cargar si es diferente del especificado en el atributo href
ignore_target=valor con true se ignora el contenido del atributo target (por ejemplo target="_blank")
Algunos ejemplos válidos:
width=valor establece el ancho
height=valor establece el alto
target=url el destino del documento a cargar si es diferente del especificado en el atributo href
ignore_target=valor con true se ignora el contenido del atributo target (por ejemplo target="_blank")
Algunos ejemplos válidos:
rel="ibox&width=350" rel="ibox&height=350" rel="ibox&target=my-js-document.html" rel="ibox&target='index.php?page=&my-js-document'" rel="ibox&ignore_target=true"
