Galería

Galería configurable

Hola, les presento una galería de imágenes, de fácil instalación y sobre todo personalizable. Se puede bajar desde el siguiente enlace: galeria.js, y pueden ver en el recuadro inferior.

Para comodida también pueden obtener los ficheros adicionales de esta página (los importantes) desde este otro enlace: galeria.zip. Se encuentran los ficheros galeria.php que muestra la galería modificable por URL que se encuentra en el recuadro de más abajo; mini.php (también referenciado más abajo... galeria.css con los estilos básicos, y unos pocos ficheros javascript para modificar la galería (ver ejemplos).

Dentro de galeria js, está la definición del objeto Foto, con el siguiente contenido:

	function Foto(URL, tam, fecha, comentario, opciones)	{
		this.URL	= URL;
		this.tam	= tam;
		this.fecha	= fecha;
		this.comentario	= comentario;
		this.opciones	= opciones;
	}
		

Cada uno de los parámetros tiene el siguiente significado:

	URL: URL de la foto (grande).
	tam: Tamaño de la misma en formato "ANCHURAxALTURA"... por ejemplo: "640x480".
	fecha: Fecha de la foto. (no es obligatorio)
	comentario: Otro parámetro que no es obligatorio.*
	opciones: Tampoco es obligatorio, pero es una gran ayuda para personalizar la galería.
		* tanto fecha como comentario, generan una capa debajo de la miniatura.
		

Definir la galería:

Para definir la galería hay que crear un array de elementos "Foto", tal como se puede ver en el fichero: fotos.js.

Otro elemento importantísimo de la galería es la definición de la carpeta donde estarán las miniaturas. Pero también es importante considerar si no se quiere crear cada miniatura, ya que si se dispone de soporte php y las librerías GD, se pueden generar las miniaturas de forma dinámica...

Se puede ver una implementación de este script en el fichero: carpeta.js. Y si se dispone de soporte php + librerias GD + mini.php el script está implementado en este otro fichero: phpCarpeta.js. El fichero mini.php se puede encontrar comprimido en esta otra dirección: mini.zip.

Uso de la galería:

Lo único necesario para usar la galería es usar en la posición que se desee la función "galeríaPaginada". Los parámetros de esta función son:

	galería: el array de objetos "Foto".
	_miniatura: un número (entrecomillado) en formato decimal,
		que represente el porcentaje del tamaño de la miniatura.
	FILASxPAGINA: un número entero del número de filas máximo por página.
	COLUMNASxFILA: Las columnas que se mostrarán por fila.
	capaBase: una cadena con el nombre )atributo id) que se le dará a la capa de la galería.
	lasDimensiones: Este valor sólo es útil si se quiere una galería re-dimensionable.
	destino: Nombre de la ventana donde se mostrarán las fotos.
		

En el ejemplo que se muestra abajo, el script se encuentra en el fichero: elScript.js, y tiene el siguiente contenido:
galeriaPaginada(Diapositivas, '0.25', 2, 3, 'galeria', '0.15,0.21,0.25,0.30,0.35;2', 'popup');

<html>
	<head> 
		<link rel='stylesheet' type='text/css' href='galeria.css' />
		<script language='javascript' src='galeria.js' type='text/javascript'></script>
		<script language='javascript' src='fotos.js' type='text/javascript'></script>
		<script language='javascript' src='carpeta.js' type='text/javascript'></script>
	</head>
	<body>
		<script language='javascript' type='text/javascript' src='elScript.js' ></script>
	</body>
</html>
Opciones Re-Dimensionable miniatura php
Resultado

Las posibilidades

Las posibilidades son muy variadas, y trataré de explicarlas adjuntando un ejemplo. La definición del array de Fotos será:

var fotos = new Array();
fotos[0] = new Foto('fotos/maxi/Diapositiva52.jpg', '640x480', '01/01/2004', 'La Concepción', 'env=1');
fotos[1] = new Foto('fotos/maxi/Diapositiva62.jpg', '640x480', '02/02/2004', 'La Concepción', 'env=0');
fotos[2] = new Foto('fotos/maxi/Diapositiva66.jpg', '640x480', '03/o3/2004', 'La Concepción', 'env=1');
fotos[3] = new Foto('fotos/maxi/Diapositiva73.jpg', '640x480', '04/04/2004', 'La Concepción', 'env=0');
		

Y la definición básica:

		galeriaPaginada(fotos, '0.10', 2, 2, 'galeria', '', 'popup');
		

Modificando apariencia

Ejemplo 1

Retocando estilos: Podemos definir un estilo para la capa de la galería, y redefinir la hoja de estilos de las diapositivas. En este caso se han re-definido los estilos para los marcos y el fondo de la capa de la siguiente manera:

<link rel='stylesheet' type='text/css' href='galeria.css' />
<style type="text/css">
#galeria	{
background-color: pink;
border: groove 2px red;
}
div.diapositiva	{
background: url(../miemoticon.gif) no-repeat right bottom beige;
}
</style>
		

Ejemplo 2

Retocando estilos con javascript: Dentro de la galería, existe una función llamada masEstilos(), que ùede re-escribirse, en este caso se ha re-escrito con el siguiente código:

<link rel='stylesheet' type='text/css' href='galeria.css' />
<style type="text/css">
#galeria	{
background: url(../miemoticon.gif) no-repeat center center aqua;}
</style>
<script type="text/javascript">
var fondos = ["red", "blue", "lime", "pink", "yellow", "magenta"];
function masEstilos()	{
return "background-color: " +
	fondos[Math.floor(Math.random() * fondos.length)] + "; ";
}
function ini()	{
document.getElementById("galeria").style.backgroundColor = 
	fondos[Math.floor(Math.random() * fondos.length)];
}
</script>
...
<body onload="ini()" >

Ejemplo 3

La galería más básica: Modificando unos pocos estilos, y unos pocos datos javascript: funciones y variables, se consigue el sistema más básico.
código javascript:

var bordeMarco = 1;
var ratioMarco = 1;
function mostrarComentario()	{
	return "";
}
function mostrarFecha()	{
	return "";
}

#galeria	{
background-color: #f0f0f0;
}
div.diapositiva	{
	border: 1px solid black;
	margin: 0px;
	background-color: white;
}
div.diapositiva img	{
	border: 1px solid gray;
}

Aspecto de la ventana

Ejemplo 4

Ahora hay que realizar modificaciones en la función ampliarDiapo (ampliar diapositiva). código javascript:

function ampliarDiapo(foto, ancho, alto, opciones, destino)	{
	var anchura = parseInt(mayor(ancho, alto) * 1.1);
	var contenido = "<html>\n\t<head>\n\t\t<title>";
	contenido += "\n\t\t\tgalería\n\t\t</title>\n\t\t";
	contenido += procesarOpcionesHead(opciones);
	contenido += "\n\t</head>\n\t<body ";
	contenido += "onclick='window.close()' ";
	contenido += "style='background: url(" + foto;
	contenido += ") no-repeat center center #eeeeee;' ";
	contenido += " >\n\t\t";
	contenido += "</body>\n";
	contenido += "</html>";
	var opsVentana = "width=" + anchura + ",height=" + anchura;
	opsVentana += ",top=" + (screen.height - anchura) / 2;
	opsVentana += ",left=" + (screen.width - anchura) / 2;
	opsVentana += ",scrollbars=No";
	var ventana = abrirVentana(destino, opsVentana);
	ventana.document.open();
	ventana.document.write(contenido);
	ventana.document.close();
}

Ordenar las miniaturas

Para ordenación de datos, se dispone en javascript del método "sort()", aunque no nos va a servir si lo que queremos es realizar ordenaciones según distintos criterios. Si que nos puede ser útil el método "reverse()" para invertir el orden actual.

Definiremos nuestro propio método "ordenar()" con un parámetro, que representará el atributo de la "Foto" con el que basaremos nuestra ordenación.

Array.prototype.cambiar = function(a, b)	{
	temp = this[a];
	this[a] = this[b];
	this[b] = temp;
	return this;
}

Array.prototype.ordenar = function(elemento)	{
	for (var i = 0, mayorI = this.length - 1; i < mayorI; i ++)
		for (var j = i + 1, mayorJ = this.length; j < mayorJ; j ++)
			if (this[i][elemento] > this[j][elemento])
				this.cambiar(i, j);
	return this;
}

Ejemplo 5

En esta ocasión lo más importante es mostrar el contenido del cuerpo de la página:

<div id="contenedor" align="center"
style="width: 100%; border: inset 2px red">
<script id="elScript" language='javascript' type='text/javascript'>
galeriaPaginada(fotos, '0.07', 2, 2, 'galeria', '', 'popup');
</script>
</div>
<div align=center >Ordenar:
<button onclick="fotos = fotos.ordenar('URL');
document.getElementById('contenedor').innerHTML =
_galeriaPaginada(fotos,'0.07',2,2,'galeria','','popup');">
	URL
</button>
<button onclick="fotos = fotos.ordenar('fecha');
document.getElementById('contenedor').innerHTML = 
_galeriaPaginada(fotos,'0.07',2,2,'galeria','','popup');">
	fecha
</button>
<button onclick="fotos = fotos.ordenar('comentario'); 
document.getElementById('contenedor').innerHTML = 
_galeriaPaginada(fotos,'0.07',2,2,'galeria','','popup');">
	comentario
</button>
<br />
<button onclick="fotos = fotos.reverse(); 
document.getElementById('contenedor').innerHTML = 
_galeriaPaginada(fotos,'0.07',2,2,'galeria','','popup');">
	Invertir orden
</button>
</div>

Trancisiones en las miniaturas

Nos ayudaremos de otro script en donde se realizan las transiciones, y de una página para cada miniatura.

En vez de fotos en miniatura, usaremos marcos inline (iframes).

En este caso la galería será de páginas y redefinimos la función diapoAmpliable

Ejemplo 6

Zona de comentarios

Esta pagina aún no tiene comentarios.

Evaluación

Valoración de esta página: (pagina.galeria) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio