Galeria de imágenes con Javascript I

Comentarios 15 COMENTARIOS
Tags 27/07/2006 -  Tags , ,

Ú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:

También te puede interesar:

Comentarios
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
9 Eijiboga



var misImagenes= new Array(12)
carpeta = \"contenidos/galeria_fotografia/\";
extension = \".jpg\";
misImagenes [1]= carpeta+\"aerea_1\"+extension;
misImagenes [2]= carpeta+\"aerea_2\"+extension;
misImagenes [3]= carpeta+\"grupo_1\"+extension;
misImagenes [4]= carpeta+\"grupo_2\"+extension;
misImagenes [5]= carpeta+\"grupo_3\"+extension;
misImagenes [6]= carpeta+\"procesos_1\"+extension;
misImagenes [7]= carpeta+\"procesos_2\"+extension;
misImagenes [8]= carpeta+\"producto_1\"+extension;
misImagenes [9]= carpeta+\"producto_2\"+extension;
misImagenes [10]= carpeta+\"producto_3\"+extension;
misImagenes [11]= carpeta+\"publicitaria_1\"+extension;
misImagenes [12]= carpeta+\"publicitaria_2\"+extension;


var totales = 12;
var i = 1;
//funcion de carga de la primera imagen
function cargarImagen(){
document.getElementById(\"imgSrc\").src = misImagenes[i];
}

function brincar_a(valor)
{ i = valor; document.getElementById(\"imgSrc\").src = misImagenes[valor]; }

function anterior(){
if(i==1){
var NumImagen = i;
} else {
var NumImagen = i-=1;
}


document.getElementById(\"imgSrc\").src = misImagenes[NumImagen];

}

function siguiente(){
if(i==totales){
var NumImagen = i;
} else {
var NumImagen = i+=1;
}

document.getElementById(\"imgSrc\").src = misImagenes[NumImagen];
}

function ver_imagen()
{
window.parent.location.href = misImagenes[NumImagen];
}

window.onload=cargarImagen;
10 Vivian

GRACIAS POR ESTE FANTASTICO SCRIPT
Lo he usado, y quiero poner una tabla con fotos miniaturas antes para que al pinchar sobre ellas se abra este script. El problema que tengo es que no se como llamarlas, la primera enlazo la página que contiene el script, pero si por ejemplo quiero ver la tercera foto como haría????

MUCHAS GRACIAS!!!
11 arturo
http://gestorescontenido.blogspot.com

me agrada la manera sencilla en que haces funcionar la galeria es bastante didactica (no tenia mucha idea de como realizarla) Gracias!!!!!!!!!!!
12 Angelica

esta muy bueno el script me ayudo mucho, pero como podria hacer para que las imagenes que cargue vengan de la base de datos y el arreglo no posea un valor determinado sino indefinido por lo que ve en la tabla, te agradeceria que me ayudes soy novata.
13 valentin

Hola no me carga la primera imagen, alguna idea, copie el código tal cual, si me podes ayudar te lo re agradezco, lo demás anda perfecto, gracias
14 valentin

Perdón otra pregunta las imágenes tienen que tener el mismo tamaño que el para que vea como la que vos pusiste de ejemplo? muchas gracias y perdón soy medio burro todavía, saludos..
15 magdalena

hola, voy a usar tu script para mi galería...lo que necesito es poner todas las funciones de javascript en un archivo .js en el root del sitio y hacer el llamado desde la pagina html..estoy intentando separar las funciones de lo que es tablas y eso y se me hace dificil, ademas tenes definiciones css ahi mismo y tmb las debo separar en un .css...
necesito una ayuda!
Haz un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com