Galeria de imágenes con Javascript I

18 COMENTARIOS -  Publicado hace 44 meses -  Clasificado en: , ,

Ú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

Publicado hace 16 meses
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
Publicado hace 16 meses
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.
Publicado hace 16 meses
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.
Publicado hace 16 meses
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..
Publicado hace 15 meses
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!
Publicado hace 15 meses
marisolivier -   http://www.ofgms.com

hola Francisco

gracias por este codigo

¿existe la posibilidad de añadir un titulo a cada foto?

gracias
Publicado hace 15 meses
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
Publicado hace 10 meses
Alvaro -  
Hola amigo, me sacado de apuros y esta excelente el script muchas gracias
Publicado hace 6 meses
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;
Publicado hace 6 meses
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!!!
Publicado hace 5 meses
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!!!!!!!!!!!
Publicado hace 5 meses
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.
Publicado hace 4 meses
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
Publicado hace 4 meses
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..
Publicado hace 3 meses
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!
Publicado hace 2 meses
RumbaSocopo -   http://www.rumbasocopo.com

Buen aporte, pero quisiera saber si se le podria agregar un sistema de comentario a cada foto..
Publicado hace 1 mes
diseño web -   http://www.trazavirtual.com

Magdalena, pero por qué tienes la necesidad de poner todas las funciones js en el archivo que mencionas?
Publicado hace 4 semanas
recursos humanos peru -   http://www.infocapitalhumano.pe

Gracias por los recursos que comparten, estos tipos de galerias son muy necesarias en casi todos los proyectos en que participamos
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