Cambiar imagen y cambiar comentario de la misma

guripa · #1 (**permalink**) 27/06/2005, 13:01

Muy buenas a todos, despues de leer muchos mensajes he conseguido hacer un pequeño visor de imagenes que según pincho en el boton siguiente va cambiando una imagen. Lo he hecho con un array de imagenes. Me gustaría tambien tener un array con comentarios y que a la vez que actualiza la imagen se modificara este comentario si alguien pode decirme como lo tengo que hacer o pasarme el codigo.

Pongo el codigo que tengo de momento:
Muchas gracias a todos.

<html>
<head>
<title>Foto de la semana</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
var img_actual=1
var img_max=5

function siguiente(img) {
if(img_actual < img_max)
{
img_actual=img_actual+1
img.src="imagenes2/foto_semana_" + img_actual + ".jpg"

}
else
{
window.alert("No hay más fotos para mostrar.")
}
}

function anterior(img) {
if(img_actual > 1)
{
img_actual=img_actual-1
img.src="imagenes2/foto_semana_" + img_actual + ".jpg"
}
else
{
window.alert("ya es la primera")
}
}
</script>
</head>

<body bgcolor="#000000">
<a name="actual"></a>
<table width="600" border="0" align="center">
<tr>
<td align="center" valign="middle">
<INPUT id="atras" type="button" value="<<" onclick="return anterior(foto)" NAME="atras"></td>
<td width="454" align="center" valign="middle"><font color="#FFFFFF">

</font></td>
<td width="80" align="center" valign="middle"><INPUT id="adelante" type="button" value=">>" onclick="return siguiente(foto)" NAME="adelante"></td>
</tr>

</table>
</body>
</html>

guripa · #2 (**permalink**) 27/06/2005, 15:14

Porlo que veo es bastante complicado ya que nadie dice nada

tunait · #3 (**permalink**) 28/06/2005, 02:05

Puedes poner bajo el lugar donde se muestran las imágenes un contenedor de id comentariosFoto

<div id="comentariosFoto"></div>

agrega un array con los comentarios al js

var comentarios = new Array('comentario1','comentario2','etc')

y bajo las líneas en el script que cambian las imágenes agrega otra para los comentarios. suponiendo que la variable que usas img_actual guarde un valor numérico...

document.GetElementById('comentariosFoto').innerHT ML= comentarios[img_actual]

Eso sí, debes considerar que en los arrays se empiezan a contar posiciones desde 0. comentarios[0] devolverá comentario1. Vigila que coincidan las posiciones de los comentarios con las posiciones de las imágenes (dices que las tiene guardadas también en un array, aunque no lo he visto en el código)

guripa · #4 (**permalink**) 28/06/2005, 02:55

Voy a probarlo a ver si consigo que funcione. Tienes razón, no tengo un array con las imagenes, lo que hago es como todas se llaman igual voy incrementando el numero hasta llegar al numero máximo.

Ya te cuento si soy capaz de que me funciones.
Muchas gracias por tu ayuda.

tunait · #5 (**permalink**) 28/06/2005, 03:19

Muchas de nadas

yá nos contarás

guripa · #6 (**permalink**) 28/06/2005, 10:30

No me sale, no se que hago mal, soy un torpe de sale humo de la cabeza.

guripa · #7 (**permalink**) 28/06/2005, 10:30

No me sale, no se que hago mal, soy un torpe me sale humo de la cabeza.

tunait · #8 (**permalink**) 28/06/2005, 10:36

Eso nos pasa a todos, no desesperes...

déjanos el código que llevas hecho a ver si lo afinamos

guripa · #9 (**permalink**) 28/06/2005, 10:43

Pues este es el codigo. La verdad tunait no se donde tengo que poner lo que me has dicho:

<html>
<head>
<title>Foto de la semana</title>
<script language="JavaScript">
var img_actual=13
var img_max=13
var comentarios = new Array("1","2","3","4","5","6","7","8","9","10","11 ","12","13")

function siguiente(img) {
if(img_actual < img_max)
{
img_actual=img_actual+1
img.src="imagenes2/foto_semana_" + img_actual + ".jpg"

}
else
{
window.alert("No hay más fotos para mostrar.")
}
}

function anterior(img) {
if(img_actual > 1)
{
img_actual=img_actual-1
img.src="imagenes2/foto_semana_" + img_actual + ".jpg"
}
else
{
window.alert("ya es la primera")
}
}
</script>
</head>
<body>
<table width="600" border="0" align="center">
<tr>
<td align="center" valign="middle"> <INPUT id="atras" type="button" value="<<" onclick="return anterior(foto)" NAME="atras"></td>
<td width="454" align="center" valign="middle"><font color="#FFFFFF"> 
</font></td>
<td width="80" align="center" valign="middle"><INPUT id="adelante" type="button" value=">>" onclick="return siguiente(foto)" NAME="adelante"></td>
</tr>
<tr>
<td colspan="3" align="center" valign="middle"><img id="foto" src="imagenes2/foto_semana_13.jpg" width="600" height="450"></td>
</tr>
<tr>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"> <font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><div id="comentariosFoto"></div>
</font></td>
</tr>
</table>
</body>
</html>

tunait · #10 (**permalink**) 28/06/2005, 11:10

Prueba a ver ahora qué dice

Código:

<html>
<head>
<title>Foto de la semana</title>
<script  language="JavaScript">
var img_actual=13
var img_max=13
var comentarios = new Array("0","1","2","3","4","5","6","7","8","9","10","11","12","13")

function siguiente() {
if(img_actual < img_max)
   {
   img_actual=img_actual+1 //esto lo puedes resumir en img_actual++
   document.getElementById('foto').src="imagenes2/foto_semana_" + img_actual + ".jpg"
    document.getElementById('comentariosFoto').innerHTML= comentarios[img_actual]

   }
else
   {
	window.alert("No hay más fotos para mostrar.")
   }   
}

function anterior() {
   if(img_actual > 1)
   {
     img_actual=img_actual-1 //esto lo puedes abreviar como img_actual--
     document.getElementById('foto').src="imagenes2/foto_semana_" + img_actual + ".jpg"
     document.getElementById('comentariosFoto').innerHTML= comentarios[img_actual]
   }
   else
   {
	window.alert("ya es la primera")
   }
}
</script>
</head>
<body>
<table width="600" border="0" align="center">
  <tr> 
    <td align="center" valign="middle"> <INPUT id="atras" type="button" value="<<" onclick="anterior()" NAME="atras"></td>
    <td width="454" align="center" valign="middle"><font color="#FFFFFF">&nbsp; 
      </font></td>
    <td width="80" align="center" valign="middle"><INPUT id="adelante" type="button" value=">>" onclick="siguiente()" NAME="adelante"></td>
  </tr>
  <tr> 
    <td colspan="3" align="center" valign="middle"><img id="foto" src="imagenes2/foto_semana_13.jpg" width="600" height="450"></td>
  </tr>
  <tr> 
    <td align="center" valign="middle"></td>
    <td align="center" valign="middle"> <font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif"><div id="comentariosFoto"></div>
      </font></td>
   </tr>
  </table>
</body>
</html>

Vigila que innerHTML lo tengas todo junto (al enviar el mensaje lo separa y lo deja así inner HTML)

guripa · #11 (**permalink**) 28/06/2005, 11:27

Lo he copiado tal cual y no me funciona, el I.explorer da un error. en la linea 40, car.1 Error: Se esperaba un objeto codigo:0

La linea 40 es la del INPUT.

tunait · #12 (**permalink**) 28/06/2005, 11:33

Pues acabo de probarlo y va bien

te acordaste de vigilar tener todo junto innerHTML??

sólo he tenido que unirlo y ha funcionado a la primera

guripa · #13 (**permalink**) 28/06/2005, 11:48

Pues no se lo que pasaba, seguro que he tocado algo y me lo he cargado. Lo he vuelto a copiar y ahora funciona bien. Lo único que cuando carga no sale el texto de la foto 13 pero si doy hacia atras y luego hacia adelante ya si que sale.

Otra cosa, puedo hacer que en la línea:

<img id="foto" src="imagenes2/foto_semana_13.jpg" width="600" height="450">

en lugar de que me cargue la foto_semana_13.jpg me cargue la foto img_actual así cuando tenga mas fotos solo tengo que cambiar la variable global img_actual

Oye, muchas gracias por tu rapidez te estoy dando la tarde.

tunait · #14 (**permalink**) 28/06/2005, 12:28

Cita:

Iniciado por guripa

Lo único que cuando carga no sale el texto de la foto 13 pero si doy hacia atras y luego hacia adelante ya si que sale.

Claro, la imagen la carga el tag html de img, no el script que no comienza a poner comentarios hasta llamar a alguna de las funciones

Cita:

Otra cosa, puedo hacer que en la línea:

<img id="foto" src="imagenes2/foto_semana_13.jpg" width="600" height="450">

en lugar de que me cargue la foto_semana_13.jpg me cargue la foto img_actual así cuando tenga mas fotos solo tengo que cambiar la variable global img_actual

Claro, pone esto debajo de esa línea

Código:

<script type="text/javascript">
<!--
document.getElementById('foto').src="imagenes2/foto_semana_" + img_actual + ".jpg"
document.getElementById('comentariosFoto' ).innerHTML= comentarios[img_actual]
//-->
</script>

Yá me contarás

guripa · #15 (**permalink**) 28/06/2005, 13:39

Ya me carga la última foto pero la segunda linea del scrip que me has puesto da error, creo que esta línea es para que coja el comentario al cargar la página. El I.explorer pone:

'document.getElementById(...)' es nulo o no es un objeto

Última pregunta, ¿se puede hacer un salto de linea dentro del array de comentarios?

Oye, de nuevo muchas, muchas, gracias.