Galeria de imágenes con Javascript I
Comentarios: 8Tags: JAVASCRIPT, SNIPPETS, DESARROLLO
Fecha: 27/07/2006
Últimamente están surgiendo bastantes galerías implementadas con javascript, ya qye gracias a la aparición de librerías de efectos como script.aculo.us se logran efectos muy similares a las galerias creadas con Flash. En esta primera parte vamos a ver como crear una galería mediante el acceso a la propiedad src de las imágenes, que cargará las distintas imágenes sin necesidad de recargar la página. Para no complicar el tutorial con tecnologías de servidor, el listado de imágenes lo introducimos mediante un array. Puedes ver un ejemplo en funcionamiento y como verás el código es bastante sencillo y sólo se utilizan tres funciones. El ejemplo completo sería:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Galeria Javascript</title>
<script language="javascript">
//Array en la que debemos incluir
// la ruta a todas las imágenes de nuestro album
var misImagenes= new Array(3)
misImagenes [0]= "001.jpg";
misImagenes [1]= "002.jpg";
misImagenes [2]= "003.jpg";
misImagenes [3]= "004.jpg";
var i = 0;
//funcion de carga de la primera imagen
function cargarImagen(){
document.imgSrc.src = misImagenes[i] ;
}
function anterior(){
if(i<1){
var NumImagen = i
} else {
var NumImagen = i-=1;
}
document.imgSrc.src = misImagenes[NumImagen];
}
function siguiente(){
if(i>2){
var NumImagen = i
} else {
var NumImagen = i+=1;
}
document.imgSrc.src = misImagenes[NumImagen];
}
//Llamar a la función
window.onload=cargarImagen;
</script>
<style type="text/css">
body {
margin-top:40px;
}
td a {
font:9px Verdana, Arial, Helvetica, "sans-serif";
color:#FFFFFF;
text-decoration:none;
</style>
</head>
<body>
<div style="width:400px; height:300px; margin: auto;">
<img name="imgSrc" id="imgSrc" alt="ImÁgenes de la galeria">
</div>
<table width="400" border="0" cellspacing="0" cellpadding="0" style="background:#666; width:400px; margin: auto;">
<tr>
<td align="center"><a href="#" onClick="anterior();"> < Anterior</a></td>
<td align="center"><a href="#" onClick="siguiente();">Siguiente > </a></td>
</tr>
</table>
</body>
</html>
Algunas entradas relacionadas:
- Dar la opción de abrir los enlaces en ventana nueva o no
- Abrir varias ventanas mediante un sólo enlace
- Obtener el tamaño de la ventana o viewport con Javascript
- Color alterno en las filas de una tabla
- Establecer la misma altura para dos columnas
| 1 |
Luis http://aventuraushuaia.com Tengo un problema, ya que solamente se me ven las 4 primeras imagenes y alli queda... Quizas hay que modificarle algo al codigo... desde ya agradeceria la respuesta... Un abrazo |
| 2 |
Francisco http://www.webintenta.com Tienes que variar la línea donde pone: var misImagenes= new Array(3) y poner el número de imágenes que conforman la galería menos uno. Los arrays empiezan a contar a partir del cero. Después tienes que poner la ruta de todas las imágenes: misImagenes [0]= "001.jpg"; misImagenes [1]= "002.jpg"; misImagenes [2]= "003.jpg"; etc. Con eso debe bastar. Saludos. |
| 3 |
Francisco http://www.webintenta.com Se me olvidaba... También tendrías que cambiar la función siguiente() cambiando en la línea if(i>2){ el 2 por el número de imágenes de tu galería menos 2. Es decir si tu galería tiene 10 imágenes, tendrías que sustituir el 2 por un 8. Saludos. |
| 4 |
Luis http://aventuraushuaia.com Hola Francisco, la verdad que excelente la ayuda que me diste. Lo que si, la función de la línea “siguiente” al total también le reste 1, ya que sino me quedaba una imagen sin ver. Muchas gracias por la rapidez de la respuesta. Un abrazo.. |
| 5 |
amber Muchas gracias!! me ayudó a resolver un problema de incompatibilidad con flash y al fin pude subir aunque sea una galería en javascript como opción. Gracias otra vez! |
| 6 |
marisolivier http://www.ofgms.com hola Francisco gracias por este codigo ¿existe la posibilidad de añadir un titulo a cada foto? gracias |
| 7 |
aaron hola que tal estoy intentando hacer una galería como la que muestras en este ejemplo, solo que quisiera añadir una funcion para que las imagenes cambien automaticamente con un intervalo de tiempo determinado, me gustaria saber como hacerlo, de antemano gracias saludos |
| 8 |
Alvaro Hola amigo, me sacado de apuros y esta excelente el script muchas gracias |


Construyendo un verdadero triple click con jQuery
arturo Romo en 16 acciones de Photoshop para dar profesionalidad a tus imágenes


