Galeria de imágenes con Javascript I

Comentarios: 8
Tags: 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:

Delicious Digg Meneame Fresqui Enchilame Design Float StumbleUpon

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

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