En esta sección vamos a explicar cómo realizar la instalación del fantástico plugin PhotoBox, con el que podrás agregar una vistosa galería de imágenes y/o fotografías en tus páginas web.
Para descargarlo haz clic en este enlace y descomprime después el archivo. A continuación entra en la carpeta photobox y copia los archivos photobox.min.js, photobox.css y photobox.ie.css en la carpeta de tu proyecto.
PhotoBox dispone entre otras de las siguientes opciones de configuración (consulta el enlace a la documentación que encontrarás al final para obtener más información):
- autoplay: permite indicar si tras seleccionar una imagen comenzará la presentación de todas ellas automáticamente.
- loop: la presentación volverá al principio después de mostrarse la última fotografía o imagen.
- thumbs: indica si se mostrarán las miniaturas en la parte inferior.
Para insertar la galería utilizaremos el método photobox(), siendo posible definir una función callback que se procesará cada vez que termine de cargarse una imagen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Galería de imágenes con JQuery PhotoBox</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
/* Aplicamos unos estilos al contenedor de las imágenes */
#galeria { height:300px;width:450px;overflow:scroll;background-color:lightgray;border:3px solid black; }
#galeria a img { border:2px solid white;vertical-align:middle;margin:4px; }
</style>
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<!-- Agregamos el plugin de PhotoBox y sus hojas de estilos -->
<script type="text/javascript" src="../lib/photobox.min.js"></script>
<link type="text/css" rel="stylesheet" href="../lib/css/photobox.css" />
<link type="text/css" rel="stylesheet" href="../lib/css/photobox.ie.css" />
<script type="text/javascript">
$(window).ready(function(){
$('#galeria').photobox( 'a',{ autoplay:true, time:3000, thumbs:true, loop:false }, imagenCargada );
});
// -----------------------
function imagenCargada() {
$("#log").append("Se ha cargado una imagen<br />");
}
</script>
</head>
<body>
<div id="log"> </div>
<div id='galeria'>
<a href="images/01.jpg"><img src="images/01-mini.jpg" alt="Título de la foto 1" /></a>
<a href="images/02.jpg"><img src="images/02-mini.jpg" alt="Título de la foto 2" /></a>
<a href="images/03.jpg"><img src="images/03-mini.jpg" alt="Título de la foto 3" /></a>
<a href="images/04.jpg"><img src="images/04-mini.jpg" alt="Título de la foto 4" /></a>
<a href="images/05.jpg"><img src="images/05-mini.jpg" alt="Título de la foto 5" /></a>
<a href="images/06.jpg"><img src="images/06-mini.jpg" alt="Título de la foto 6" /></a>
<a href="images/07.jpg"><img src="images/07-mini.jpg" alt="Título de la foto 7" /></a>
<a href="images/08.jpg"><img src="images/08-mini.jpg" alt="Título de la foto 8" /></a>
<a href="images/09.jpg"><img src="images/09-mini.jpg" alt="Título de la foto 9" /></a>
<a href="images/10.jpg"><img src="images/10-mini.jpg" alt="Título de la foto 10" /></a>
</div>
</body>
</html>
EXPLICACIÓN: se crea un 'DIV' con enlaces a las imágenes que se desean visualizar (y a sus miniaturas), mostrándose la pantalla principal de la galería al llamarse al método photobox() tras cargarse la página web.
Cuando se esté visualizando una imagen es posible ampliar y reducir su tamaño haciendo scroll con la ruedecilla del ratón, cambiar a la imagen anterior y siguiente con los cursores izquierdo y derecho y cerrar la presentación pulsando la tecla Escape.
Vea también: [ Documentación de PhotoBox ] - [ Tutorial CSS ]
