Ayuda con galeria

cyber1977 · #1 (**permalink**) 15/03/2011, 19:35

Alguien me podri decir a donde va la ruta. por ejemplo para mi la ruta de cada imagen iria aqui: 10. misImagenes [0]= "001.jpg"; pero cuando le añado todas las rutas no me aparecen las imagenes.

El codigo es el siguiente:

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
05.<title>Parents Galler</title>
06.<script language="javascript">
07.//Array en la que debemos incluir
08.// la ruta a todas las imágenes de nuestro album
09.var misImagenes= new Array(3)
10. misImagenes [0]= "001.jpg";
11. misImagenes [1]= "002.jpg";
12. misImagenes [2]= "003.jpg";
13. misImagenes [3]= "004.jpg";
14.var i = 0;
15.//funcion de carga de la primera imagen
16.function cargarImagen(){
17. document.imgSrc.src = misImagenes[i] ;
18.}
19.function anterior(){
20. if(i<1){
21. var NumImagen = i
22. } else {
23. var NumImagen = i-=1;
24. }
25. document.imgSrc.src = misImagenes[NumImagen];
26.}
27.function siguiente(){
28. if(i>2){
29. var NumImagen = i
30. } else {
31. var NumImagen = i+=1;
32. }
33. document.imgSrc.src = misImagenes[NumImagen];
34.}
35.//Llamar a la función
36.window.onload=cargarImagen;
37.</script>
38.<style type="text/css">
39.body {
40. margin-top:40px;
41.}
42.td a {
43. font:9px Verdana, Arial, Helvetica, "sans-serif";
44. color:#FFFFFF;
45. text-decoration:none;
46.</style>
47.</head>
48.<body>
49.<div style="width:400px; height:300px; margin: auto;">
50.<img name="imgSrc" id="imgSrc" alt="ImÁgenes de la galeria">
51.</div>
52.<table width="400" border="0" cellspacing="0" cellpadding="0" style="background:#666; width:400px; margin: auto;">
53. <tr>
54. <td align="center"><a href="#" onClick="anterior();"> < Anterior</a></td>
55. <td align="center"><a href="#" onClick="siguiente();">Siguiente > </a></td>
56. </tr>
57.</table>
58.</body>
59.</html>

Gracias por la ayuda que me puedan ofrecer.

Naahuel · #2 (**permalink**) 15/03/2011, 20:46

Agradecería que pongas mejor el código, es mucho trabajo quitar los números de línea para probarlo. Si ponés un código, podés usar las etiquetas que salen más arriba del editor del post quee dicen HIGHLIGHT, que permite que el código salga bien bonito.

Lo que si observo a simple vista es que declaraste mal el array de las imágenes. Vos pusiste esto:

Código Javascript:

Ver originalvar misImagenes= new Array(3)
misImagenes [0]= "001.jpg";
misImagenes [1]= "002.jpg";
misImagenes [2]= "003.jpg";
misImagenes [3]= "004.jpg";

El error es que estás declarando un array de 3 elementos pero le estás asignando 4 (¡el 0 también cuenta!). Lo más fácil es esto:

Código Javascript:

Ver originalvar misImagenes = ["001.jpg", "002.jpg", "003.jpg", "004.jpg"];

Que además es más fácil de mantener, pues sólo tiene que quitar o agregar elementos sin necesidad de modificar otra cosa.

Otro error a la vista es esto:

Código Javascript:

Ver originalwindow.onload=cargarImagen

Pues así no se llama una función en JS. Lo correcto sería:

Código Javascript:

Ver originalwindow.onload=cargarImagen();

A veces este sitio ayuda mucho a detectar errores:
http://www.jslint.com/

(en inglés)

cyber1977 · #3 (**permalink**) 15/03/2011, 21:12

Gracias por contestar y disculpa por los numeros. yo tengo 14 imagenes para mostrar. el folder lo tengo en el desktop de la comp. el codigo sin numeros es:

<!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>Parents Galler</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>

Naahuel · #4 (**permalink**) 15/03/2011, 21:21

Pues a mi me funciona bien hombre. No hay dudas que hay algo mal en la ruta de las imágenes.
¿Las imágenes están en la misma carpeta que el archivo html?
También tené en cuenta lo que te dije antes.

cyber1977 · #5 (**permalink**) 15/03/2011, 21:42

Gracias. No se que pasa. Lo pruebo en dreamweaver y tampoco. lo probe en dreamweaver por que lo que estaba usando era un editor que se llama webpagemaker. la pagina la hice en photoshop. Podra ser el editor?

cyber1977 · #6 (**permalink**) 15/03/2011, 21:43

este es el codigo con la ruta de las imagenes:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Parents Galler</title>
<script language="javascript">
//Array en la que debemos incluir
// la ruta a todas las imágenes de nuestro album
var misImagenes= new Array(14)
misImagenes [0]= "C:\Documents and Settings\Macho\Desktop\misImagenes\000.jpg";
misImagenes [1]= "C:\Documents and Settings\Macho\Desktop\misImagenes\001.jpg";
misImagenes [2]= "C:\Documents and Settings\Macho\Desktop\misImagenes\002.jpg";
misImagenes [3]= "C:\Documents and Settings\Macho\Desktop\misImagenes\003.jpg";
misImagenes [4]= "C:\Documents and Settings\Macho\Desktop\misImagenes\004.jpg";
misImagenes [5]= "C:\Documents and Settings\Macho\Desktop\misImagenes\005.jpg";
misImagenes [6]= "C:\Documents and Settings\Macho\Desktop\misImagenes\006.jpg";
misImagenes [7]= "C:\Documents and Settings\Macho\Desktop\misImagenes\007.jpg";
misImagenes [8]= "C:\Documents and Settings\Macho\Desktop\misImagenes\008.jpg";
misImagenes [9]= "C:\Documents and Settings\Macho\Desktop\misImagenes\009.jpg";
misImagenes [10]= "C:\Documents and Settings\Macho\Desktop\misImagenes\010.jpg";
misImagenes [11]= "C:\Documents and Settings\Macho\Desktop\misImagenes\011.jpg";
misImagenes [12]= "C:\Documents and Settings\Macho\Desktop\misImagenes\012.jpg";
misImagenes [13]= "C:\Documents and Settings\Macho\Desktop\misImagenes\013.jpg";
misImagenes [14]= "C:\Documents and Settings\Macho\Desktop\misImagenes\014.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>

Naahuel · #7 (**permalink**) 15/03/2011, 23:00

El script me funcionó a mi, las imagenes cargaron como corresponde y podía pasarlas.
El problema está en la ruta. Las imagenes que tenés ponelas en la misma carpeta que tu archivo HTML y pasá las rutas de la misma forma que hacías antes (o sea sólo el nombre).