I. Introducción
Antes de nada, decir que dicha librería solo sirve para el mostrado de imágenes. Aun así, los efectos que usa para visualizarlas es bastante curioso. Por tanto, si lo que necesitais es mostrar galerías, a mí me parece una buena librería que implementar.
He subido un fichero .rar al servidor con todo lo que necesitais para implementarlo. Como siempre, de lo que disponemos es de varios ficheros en javascript, un fichero CSS para los estilos y una página web de donde hacemos la referencia.
Además, incluyo un directorio de imágenes: Tanto las imágenes que se muestran como las que necesita el visor. Lógicamente estas imágenes se pueden modificar.
II. Uso de la librería
Antes de nada, hay que realizar la referencia a los dos ficheros javascript:
<script type=”text/javascript” src=”jquery.js” mce_src=”jquery.js”></script>
<script type=”text/javascript” src=”interface.js” mce_src=”interface.js”></script>
Ademas de estas dos inclusiones, hay que añadir un código javascript en la misma página web donde vamos a cargar el efecto:
<script type=”text/javascript”>
$(document).ready(function(){$.ImageBox.init({loaderSRC: ‘images/imagebox/loading.gif’,closeHTML: ‘<img src=”images/imagebox/close.jpg” mce_src=”images/imagebox/close.jpg” />’});});
</script>
Básicamente sirve para cargar las imágenes de carga y la imagen del botón de cerrar la ventana emergente una vez que la tenemos abierta.
A continuación hay que añadir el fichero CSS:
<link rel=”stylesheet” href=”estilo.css” mce_href=”estilo.css” type=”text/css” media=”screen”/>
Y por último, hacemos referencia a las imágenes por los enlaces HTML:
<a href=”images/bw1.jpg” mce_href=”images/bw1.jpg” title=”Moon eclipse” rel=”imagebox-bw”>Ejemplo 1</a>
<a href=”images/bw2.jpg” mce_href=”images/bw2.jpg” title=”Rain drops” rel=”imagebox-bw”>Ejemplo 2</a>
<a href=”images/bw3.jpg” mce_href=”images/bw3.jpg” title=”Church” rel=”imagebox-bw”>Ejemplo 3</a>
La clave, para variar, es el parámetro “rel”. Podeis poner tantos enlaces como queráis. Todos pertenecerán a la misma galería de imágenes.
Como veis, es muy sencillo de usar y junto con el ejemplo que os adjunto, espero que no tengáis ningún tipo de problema.
III. Referencias
- Volver -
