Cambiar valor de variable

[Isabel_Maria]

Hola.

Explico mi problema dentro del script.
Gracias.

<script>
function cambiar(nfoto)
{
////--> Aqui deberiamos ver el ultimo valor de la variable fotoactual antes que sea ocultada la capa activa
alert (fotoactual);
document.getElementById("fotoactual").style.displa y="none";

////--> Aqui solo pongo 2 pero hay unos 50 fotos y la idea es que muestre una capa que tengo bajo la foto pero cuando haga click en otra foto distinta debe ocultarse la anterior capa antes que se muestre la nueva. Por eso habia pensado en guardar al final del script el valor de "nfoto" en la variable "fotoactual" para asi, cuando se regrese al script tras hacer click en otra foto, lo primero que se haga sea ocultar la capa visible que seria por el momento la que tiene el valor de "fotoactual" hasta que tome el nuevo valor.
if (nfoto == 1 ){
document.getElementById("foto_src").src="foto-1.jpg";
document.getElementById("x1").style.display="block ";
}
else if (nfoto == 2 ){
document.getElementById("foto_src").src="foto-2.jpg";
document.getElementById("x2").style.display="block ";
}
////--> Aqui deberia de cambiarse y almacenarse el nuevo valor de nfoto dentro de la variable fotoactual y poder verlo
var fotoactual=nfoto;
alert (fotoactual);
}
</script>

[maycolalvarez]

yo te recomiendo que uses un array (o JSON) con las fotos, así te puedes ahorrar los 50 if else en a lo sumo un sólo if o ninguno, sirviéndote incluso para n fotos, es cuestión de optimizar con arrays

si tienes la variable nfoto, podrías usarla de ésta forma:

Código Javascript:

document.getElementById("foto_src").src="foto-" + nfoto + ".jpg";
document.getElementById("x" + nfoto).style.display="block ";
 

[Isabel_Maria]

Iniciado por maycolalvarez

yo te recomiendo que uses un array (o JSON) con las fotos, así te puedes ahorrar los 50 if else en a lo sumo un sólo if o ninguno, sirviéndote incluso para n fotos, es cuestión de optimizar con arrays

si tienes la variable nfoto, podrías usarla de ésta forma:

Código Javascript:

document.getElementById("foto_src").src="foto-" + nfoto + ".jpg";
document.getElementById("x" + nfoto).style.display="block ";
 

Gracias por tu respuesta. La idea es buena para
document.getElementById("x" + nfoto).style.display="block ";
pero no tan buena para las imagenes pues los nombres aunque en el ejemplo son correlativos en realidad pueden ser nombres diferentes. En cualquier caso, el problema no es exactamente este sino el que relato en mi pregunta. Pero te agradezco esa apreciacion que puede llevar a un codigo mucho mejor.

[emprear]

Sin ver el html asociado y como estás llamando la función no entiendo que es lo que estás haciendo.
De no poder identificar las imágenes utilizando una secuencia numerica (foto_1, foto_2, etc), vas a tener que construir un array con dichas imágenes ó recorrer el dom para identificarlas y utilizar los indices correspondientes.
Si exponés el código, utilizá por favor el bbcode CODE ó el highlight para que no aparezcan cosas como
style.displa y="none";

Saludos

[Isabel_Maria]

Iniciado por emprear

Sin ver el html asociado y como estás llamando la función no entiendo que es lo que estás haciendo.
De no poder identificar las imágenes utilizando una secuencia numerica (foto_1, foto_2, etc), vas a tener que construir un array con dichas imágenes ó recorrer el dom para identificarlas y utilizar los indices correspondientes.
Si exponés el código, utilizá por favor el bbcode CODE ó el highlight para que no aparezcan cosas como
style.displa y="none";

Saludos

Gracias. Se trata de una galeria de fotos en las que clickando en tumbails pareceria la imagen grande en una div.
Es decir que para el tumbail 1 hacemos click en algo asi:

Código:

<a href="#" onClick="cambiar(1)"><img src="tumfoto-1.jpg" alt="Foto 1" width="140" height="105" border="0"></a>

Pongo nuevamente el codigo y la pregunta.

Código:

<script>
function cambiar(nfoto)
{

////--> Aqui deberiamos ver el ultimo valor de la variable fotoactual antes que sea ocultada la capa activa

alert (fotoactual);
document.getElementById("fotoactual").style.display="none";

////--> Aqui solo pongo 2 pero hay unos 50 fotos y la idea es que muestre una capa que tengo bajo la foto pero cuando
haga click en otra foto distinta debe ocultarse la anterior capa antes que se muestre la nueva. 
Por eso habia pensado en guardar al final del script el valor de "nfoto" en la variable "fotoactual" para asi, 
cuando se regrese al script tras hacer click en otra foto, lo primero que se haga sea ocultar la capa visible que seria 
por el momento la que tiene el valor de "fotoactual" hasta que tome el nuevo valor.

if (nfoto == 1 ){
document.getElementById("foto_src").src="foto-1.jpg";
document.getElementById("x1").style.display="block ";
}
else if (nfoto == 2 ){
document.getElementById("foto_src").src="foto-2.jpg";
document.getElementById("x2").style.display="block ";
}
////--> Aqui deberia de cambiarse y almacenarse el nuevo valor de nfoto dentro de la variable fotoactual y poder verlo

var fotoactual=nfoto;
alert (fotoactual);
}
</script>

[emprear]

Puesto como está tampoco dice mucho, hablás tanto de reemplazar un src como de ocultar un div, pero en ningún lugar aparecen definidos dichos elementos ni como están distribuidos y posicionados.

Fijate

Código HTML:

<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<style type="text/css">
/*<![CDATA[*/
.miniatura{
cursor: pointer;
width: 100px;
height: 100px;
}
#miniaturas, #visor{
float:left;
}
#miniaturas{
margin-right: 15px;
}
#visor{
border: solid 1px #241A17;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function cambiar(f){
document.getElementById("fotoactual").src=f.alt;
document.getElementById("fotoactual").title=f.title;
}
//]]>
</script>
</head>
<body>
<div>
<div id="miniaturas">
<img class="miniatura" src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/casablanca-250x350.jpg" alt="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/casablanca-500x700.jpg" onclick="cambiar(this);" title="Casablanca" /><br /> 
<img class="miniatura"  src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/forrest-gump-250x350.jpg" alt="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/forrest-gump-500x700.jpg" onclick="cambiar(this);" title="Forrest Gump" /><br /> 
<img class="miniatura" src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/lo-que-el-viento-250x350.jpg" alt="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/lo-que-el-viento-500x700.jpg" onclick="cambiar(this);" title="Lo que el viento se llevó" /><br />
</div>
<div id="visor">
<img id="fotoactual" width="500" height="700" alt="" src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/img/transparente.gif"/>
</div>
</div>
</body>
</html>
 

Habría que mejorarlo creando el array de imágenes, agregando las miniaturas dinamicamente y haciendo un addEventListener para agregar la función cambiar a las miniaturas.

Sigo sin entender mucho la idea

SAludos