Galería de imágenes en JavaScript.

En categoría: Herramientas y Utilidades

Completa galería de imágenes para nuestro sitio. La misma nos permite agregar todas las imágenes que queramos para ser mostradas una por una a la selección del visitante o de manera automática cada x segundos (Slide Show). La galería muestra la información de la imagen cargada, por ejemplo, el ancho y alto definido y real de la imagen, ubicación (URL) de la imagen, tamaño en KB y nombre del archivo. También se muestra una vista previa de la siguiente imagen y por cada muestreo se producirá un efecto de opacamiento.

| Descripción del ejemplo JavaScript

Información relativa al Script

Compatible con: Internet Explorer

Tamaño del Script: 11KB

Probar el Script

Temas relacionados a este Script

Ejemplo JavaScript para crear una galería de imágenes.

Código fuente del script:

<STYLE type="text/css">
#total {
	font-weight:bold;
	font-size:17px;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#999999;
	background-color:#003366;
	border:#CCCCCC 2px outset;
}
#tabla TR {
	text-align:center;
}
#tabla {
	border:#003399 2px outset;
	background-color:#9999CC;
}
#tdIMG {
	background-color:#666666;
	border:#CCCCCC 2px outset;
}
#info {
	background-color:#003399;
	color:#CCCCCC;
	padding:2px;
	border:#006699 3px inset;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
}
#info b {
	color:#336666;
}
#URLspan {
	font-size:12px;
	background-color:#006699;
	color:#CCCCCC;
	font-weight:bold;
	width:100%;
	padding:3px;
	position:relative;
	width:98%;
	border:#990000 1px double;
}
#URLspan a {
	color:#CCCCCC;
	font-size:13px;
}
#galeria {
	border:#CCCCCC 2px dotted;
}
#galeria2 {
	border:#ffffff 1px solid;
}
#tituloIMG {
	color:#CCCCCC;
	font-weight:bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
}
#url span{
	text-decoration:underline;
	cursor:pointer;
}
#ayuda {
	color:#ffffff;
	font-weight:bold;
	font-size:16px;
	margin-left:10px;
	margin-right:5px;
	cursor:pointer;
}
#botSlideShow, #botDetener, #botIni, #botprev, #botnext {
	font-size:10px;
	font-family:Verdana,Helvetica;
	font-weight:bold;
	color:white;
	background:#638cb5;
	border:1px #ffffff solid;
	height:19px;
}
</STYLE>

</HEAD>

<BODY>

<TABLE border="0" cellpadding="0" cellspacing="3" id="tabla" align="center">
	<TR>
		<TD id="total"></TD>
	</TR>
	<TR>
		<TD id="slideShow" align="left">
		<span id="ayuda" onClick="ayuda()">?</span>
	<input type="button" id="botSlideShow" value="Slide Show" onClick="slideShow()">
	cada <input type="text" id="txtSlideShow" maxlength="1" style="width:18px; ">
	segundos. 
	<input type="button" id="botDetener" value="Detener" onClick="detenerSlideShow()" 
	style="visibility:hidden; width:90px; ">
		</TD>
	</TR>

// Creamos un array para las imágenes de la galería
var cargaIMG = new Array()
// Creamos un array para definir el valor de src de cada imagen
var strSrc = new Array()
// Creamos un array para el ancho real de cada imagen
var anchoReal = new Array()
// Creamos un array para el alto real de cada imagen
var altoReal = new Array()
// Creamos un array para el título descriptivo de la imagen
var titulo = new Array()

/* Creamos una imagen asignando el ancho y alto (en pixeles) 
que deseamos que tenga la imagen en la galería */
cargaIMG[0] = new Image(33,32);
// Definimos el ancho real de la imagen
anchoReal[0] = 33
// Definimos el alto real de la imagen
altoReal[0] = 32
// Definimos la ruta (URL) de la imagen
strSrc[0] = cargaIMG[0].src = "0.jpg";
// Definimos el título de la imagen
titulo[0] = 'Icono Bold'

/* *** Agregamos todas las imágenes que queramos **** */
cargaIMG[1] = new Image(33,32);
anchoReal[1] = 33
altoReal[1] = 32
strSrc[1] = cargaIMG[1].src = "1.jpg";
titulo[1] = 'Icono Codigo'
cargaIMG[2] = new Image(33,32);
anchoReal[2] = 33
altoReal[2] = 32
strSrc[2] = cargaIMG[2].src = "2.jpg";
titulo[2] = 'Icono Italic'
cargaIMG[3] = new Image(230,171);
anchoReal[3] = 459
altoReal[3] = 344
strSrc[3] = cargaIMG[3].src = "reload1.jpg";
titulo[3] = 'Simpson Matrix'
cargaIMG[4] = new Image(359,244);
anchoReal[4] = 459
altoReal[4] = 344
strSrc[4] = cargaIMG[4].src = "reload2.jpg";
titulo[4] = 'Ani-Matrix'

// Definimos el ancho mínimo que tendrá la tabla que contiene las imágenes
var minAncho = 400 // No se recomienda valores menores a 400
// Definimos el alto mínimo que tendrá la celda que contiene las imágenes
var minAlto = 300 // No se recomienda valores menores a 300
// Definimos el tiempo por defecto para el Slide Show
var tSlideShow = 3 // en segundos

/* ******** NO EDITAR ******** 
******************************
**** RESPETE EL COPYRIGHT ****
******************************
******** NO EDITAR ******** */

var anchoTabla = 0
var altoTabla = 0
var i = 0
var j = 0
var bot
var SlideShow = false
var detener

/* Mediante este bucle averiguamos qué imagen 
tiene el mayor ancho en pixeles */
for (n = 0; n <= cargaIMG.length-1; n++) { 
	if (cargaIMG[n].width > anchoTabla) {
	anchoTabla = cargaIMG[n].width+10
	}
}
/* Con este otro averiguamos qué imagen 
tiene el mayor alto en pixeles */
for (n = 0; n <= cargaIMG.length-1; n++) { 
	if (cargaIMG[n].height > altoTabla) {
	altoTabla = cargaIMG[n].height+10
	}
}

/* Si el valor de anchoTabla es menor al definido en minAncho
definimos un ancho mínimo para la tabla que contiene las imágenes */
if (anchoTabla < minAncho) {
	anchoTabla = minAncho
}
/* Lo mismo hacemos para el alto */
if (altoTabla < minAlto) {
	altoTabla = minAlto
}

// Cambiamos el ancho de la tabla de acuerdo al máximo ancho de las imágenes
document.getElementById('tabla').width = anchoTabla + 'px'
// Cambiamos el alto de la celda de acuerdo al máximo alto de las imágenes
document.getElementById('tdIMG').height = altoTabla + 'px'
var version = 'GalJS1.0 <a href="http://www.codigojavascript.com/">www.codigojavascript.com</a>'
var txtSlideShow = document.getElementById('txtSlideShow')
txtSlideShow.value = tSlideShow
var imagen = document.getElementById('galeria')
var msgTotal = 'Estás viendo la imagen ' + (i + 1) + ' de ' + cargaIMG.length
document.getElementById('total').innerHTML = msgTotal

function comenzar() {
document.getElementById('botIni').click()
}

window.onload = comenzar

function slideShow() {
SlideShow = true

tiempo = document.getElementById('txtSlideShow').value
	if (isNaN(tiempo) || tiempo == '' || tiempo == 0) {
		alert('El tiempo de reproducción debe estar expresado\n' + 
		'mediante un dato numérico y debe ser mayor que cero\n' + 
		'Se ejecutará el SlideShow a los segundos por defecto ('+tSlideShow+' seg.)')
		tiempo = tSlideShow
		document.getElementById('txtSlideShow').value = tSlideShow
	}
	if (i < cargaIMG.length - 1) {
detener = setTimeout("document.getElementById('botnext').click(),slideShow()",tiempo*1000);
	}
	else {
detener = setTimeout("document.getElementById('botnext').click()",tiempo*1000);
	}
}

function detenerSlideShow() {

clearTimeout(detener);
SlideShow = false
setTimeout("document.getElementById('botDetener').style.visibility = 'hidden'",1000)

}

// Creamos una función para el efecto de opacamiento en las imágenes
function efectoOpaco() {
	if (m <= 100) {
	imagen.style.filter = 'alpha(Opacity=' + m + ')'
	imagen.style.MozOpacity = m/100
	m = m + 10
	setTimeout("efectoOpaco()",60)
	}
}

// Creamos una función para cargar la ruta completa de la URL
function showUrl () {
	URL = document.getElementById('URLspan')
	URL.style.visibility = 'visible'
	ruta = cargaIMG[i].src.substring(0,cargaIMG[i].src.length-strSrc[i].length)
	URL.innerHTML = ruta
}
// Esta función oculta la URL
function hideUrl () {
	URL.innerHTML = version
}

function abrirIMG() {
	abrir = window.open(cargaIMG[i].src)
}

function ayuda() {
	alert('GalJS versión 1.0\n' + 
	'©2008 Todos los derechos reservados\n' + 
	'Versión libre para su distribución\n' + 
	'www.codigojavascript.com - Código JavaScript\n' + 
	'Autor: Lodola Juan Pablo - Argentina')
}
// Creamos una función para mostrar las imágenes de la galería
function galeriaImagen() {

if (SlideShow) {
	document.getElementById('botDetener').style.visibility = 'visible'
}
else {
	document.getElementById('botDetener').style.visibility = 'hidden'
}

m = 0

if (bot == 1 && i > 0) {
	j = 0
	i--
}

else if (bot == 2 && i < cargaIMG.length - 1) {
	i++
}

if (titulo[i] == '' || !titulo[i]) {
	document.getElementById('tituloIMG').innerHTML = 'Sin título'
}
else {
	document.getElementById('tituloIMG').innerHTML = titulo[i]
}

// Mostramos la imagen correspondiente
imagen.src = cargaIMG[i].src
// Definimos su ancho
imagen.width = cargaIMG[i].width
// Definimos su alto
imagen.height = cargaIMG[i].height

// Se ejecuta para todas las imágenes menos para la última
if (i < cargaIMG.length - 1) {
	// Muestra el mensaje más la imagen en miniatura para la vista previa
	document.getElementById('vPrevia').innerHTML = 'Siguiente Imagen: ' +
	'<IMG src="'+cargaIMG[i+1].src+'" id="galeria2" width="32" height="32">'
}

// Para la última imagen
else {
	// Mostramos un mensaje avisando que no hay más imágenes en la galería
	document.getElementById('vPrevia').innerHTML = 'No hay más Imágenes en esta galería'
	j += i
}

// Solo para Internet Explorer
if (navigator.appName == 'Microsoft Internet Explorer') {
	// Definimos el tamaño de la imagen en KB
	tamanyo = Math.round(cargaIMG[i].fileSize/1000)+'KB';
}
// Para otros navegadores mostramos un mensaje
else {
	tamanyo = 'No disponible en Firefox'
}

// Escribimos qué imagen se está visualizando y cuantas hay en total
document.getElementById('total').innerHTML = 'Estás viendo la imagen '+
(i + 1) + ' de ' + cargaIMG.length

/* Mostramos toda la información de la imagen
ancho y ancho real, alto y alto real, Nombre de archivo, 
Ubicación (URL del archivo) y tamaño del archivo de imagen (solo para IE) */
document.getElementById('info').innerHTML = '<b>Ancho:</b> ' + cargaIMG[i].width + 'px '+
'(Ancho Real: ' + anchoReal[i] + 'px)<br>' + 
'<b>Alto:</b> ' + cargaIMG[i].height + 'px ' + 
'(Alto Real: ' + altoReal[i] + 'px)<br>' + 
'<b>Nombre del archivo:</b> ' + strSrc[i]
+ '<br>' + 
'<span id="url" onMouseover="showUrl()" onMouseout="hideUrl()" onClick="abrirIMG()">' + 
'<b>Ubicación (URL):</b> <span title="Abrir Imagen">' + 
cargaIMG[i].src.substring(0,29) + '...</span></span><br>' + 
'<b>Tamaño:</b> ' + tamanyo

// Si se está visualizando la última imagen y se ejecuta nuevamente la función
if (j > i+1) {
	// Eliminamos el efecto de opacamiento en la imagen
	m = 100
	// Ejecutamos la función mensaje()
	setTimeout(mensaje,10)
}
// Ejecutamos la función que produce el efecto opacamiento en la imagen
efectoOpaco()

}// Fin de la función galeríaImagen()

/* Creamos una función para mostrar el mensaje avisando 
que es la última imagen de la galería */
function mensaje() {

confirmacion = confirm('No hay más imágenes en esta galería\nIr a la primera Imagen?')

// Mostramos la primera imagen de la galería
	if (confirmacion) {
		j = 0
		document.getElementById('botIni').click()
		clearTimeout(detener)
		if (SlideShow) {
			document.getElementById('botSlideShow').click()
		}
	}
	else {
		clearTimeout(detener)
		SlideShow = false
		document.getElementById('botDetener').style.visibility = 'hidden'
	}
} // Fin de la función mensaje()

</script>
		</TD>
	</TR>
	<TR>
		<TD align="left">
			<TABLE cellpadding="0" cellspacing="2" border="0" 
			width="100%" style="border-top:#006666 1px dotted; ">
				<TR>
					<TD width="130px">
<INPUT type="button" value="<<" onClick="bot=1;galeriaImagen()" style="width:30px; " id="botprev"> 
<INPUT type="button" value="Inicio" onClick="bot=1;i=1;galeriaImagen();return false" id="botIni">
<INPUT type="button" value=">>" onClick="bot=2;galeriaImagen()" style="width:30px; " id="botnext">
					</TD>
					<TD id="vPrevia" height="40px" align="right"></TD>
				</TR>
			</TABLE>
		</TD>
	</TR>
	<TR>
		<TD align="left" valign="top">
		<B>Información de la imagen</B>
		</TD>
	</TR>
	<TR>
		<TD align="left" id="info" valign="top" height="90px">
		</TD>
	</TR>
	<TR>
		<TD align="center" height="25px" valign="middle">
			<SPAN id="URLspan">GalJS1.0 
			<a href="http://www.codigojavascript.com/"> www.codigojavascript.com </a></SPAN>
		</TD>
	</TR>
</TABLE>

</BODY>
</HTML>

	Temas relacionados a este Script:
	Copiar texto al portapapeles de Windows con JavaScript Convertir el código ASCII de un caracter especial Agregar el buscador de Google a nuestro sitio Copiar al portapapeles el texto seleccionado mediante JavaScript Ordenar datos de filas de una tabla mediante JavaScript Buscar con Google solo en nuestro dominio Generador de Meta Tag Generar clases automáticamente a listas HTML Galería de imágenes en JavaScript Conversión unidades - KB a MB y viceversa

Comentarios Recibidos sobre: Galería de imágenes en JavaScript

ADMIN | Enviado: Mayo 27, 2008

Jorge Pérez de Venezuela | Enviado: Mayo 14, 2008

Jose de Argentina | Enviado: Marzo 28, 2008

Agradecemos todos los comentarios. Gracias por ayudarnos a mejorar el sitio.
Importante: Los comentarios están para ampliar el artículo propuesto en esta página, proponer o responder alguna consulta de otro visitante. En ningún caso nos hacemos responsables del contenido publicado en los comentarios. En el caso que formules una pregunta y ésta no sea respondida, puedes solicitarnos ayuda desde el formulario de ayuda aunque no te aseguramos una respuesta inmediata.