insertar ciclo for dentro de una función

[mpaunero10]

Estoy intentando con javascript que al activar una función me salga un desplegable con un ciclo for con distintas fotografías, pero me da error al intentar redactar un ciclo for dentro de la función. Esto es lo que estoy intentando:


function desplegable () {
document.getElementById("lug_drc").innerHTML= "<div id='opciones'><h1>Titulo de foto 1</h1>

Y me gustaría meter esto aquí dentro y que funcione:

for (i=0; i<5; i++) {
document.write("<img src='imagenes/cordoba0"+ i +".jpg'/>");
}


</div>";
}

A ver si me podeís ayudar, gracias!

[emprear]

Iniciado por mpaunero10

Estoy intentando con javascript que al activar una función me salga un desplegable con un ciclo for con distintas fotografías, pero me da error al intentar redactar un ciclo for dentro de la función. Esto es lo que estoy intentando:


function desplegable () {
document.getElementById("lug_drc").innerHTML= "<div id='opciones'><h1>Titulo de foto 1</h1>

Y me gustaría meter esto aquí dentro y que funcione:

for (i=0; i<5; i++) {
document.write("<img src='imagenes/cordoba0"+ i +".jpg'/>");
}


</div>";
}

A ver si me podeís ayudar, gracias!

A ver, esto está correcto

Código:

for (i=0; i<5; i++) {
document.write("<img src='imagenes/cordoba0"+ i +".jpg'/>");
}

Te va a general

Código:

<img src="imagenes/cordoba00.jpg">
<img src="imagenes/cordoba01.jpg">
<img src="imagenes/cordoba02.jpg">
<img src="imagenes/cordoba03.jpg">
<img src="imagenes/cordoba04.jpg">

Ahora eso mismo metido en esa función que creaste, es más o menos que un desastre.

o creas contenido al vuelo con document.write(), ó generás una cadena para hacerle un innerHTML a otro elemento, pero no las dos cosas
Para generar la cadena utiliza

Código:

var cadena = ""
for (i=0; i<5; i++) {
cadena += "<img src='imagenes/cordoba0"+ i +".jpg'/>";
}
// y ya luego fuera del for
elemento.innerHTML = cadena;

Se entiende?

[mpaunero10]

Muchas gracias compañeros, me ha servido de mucha ayuda. Ahora una pregunta para darle una vuelta de tuerca más. Ahora el siguiente paso que no estoy consiguiendo dar es meter una variable enviada desde una función en el ciclo for. Me explico


var html="";
for (i=0; i<5; i++)
{
html=html+"<img src='imagenes/cordoba0"+ i +".jpg'/>";
}
document.getElementById("lug_drc").innerHTML=html;

"Cordoba" tiene que ir variando en función de la ciudad que he marcado, enviada desde un onClick. Antes lo tenía conseguido porque estaba dentro de la función pero al sacar el ciclo for fuera... se me complica. No se si me he explicado bien lo que quería preguntar! gracias por las ayuda de nuevo!

[emprear]

Iniciado por mpaunero10

Muchas gracias compañeros, me ha servido de mucha ayuda. Ahora una pregunta para darle una vuelta de tuerca más. Ahora el siguiente paso que no estoy consiguiendo dar es meter una variable enviada desde una función en el ciclo for. Me explico


var html="";
for (i=0; i<5; i++)
{
html=html+"<img src='imagenes/cordoba0"+ i +".jpg'/>";
}
document.getElementById("lug_drc").innerHTML=html;

"Cordoba" tiene que ir variando en función de la ciudad que he marcado, enviada desde un onClick. Antes lo tenía conseguido porque estaba dentro de la función pero al sacar el ciclo for fuera... se me complica. No se si me he explicado bien lo que quería preguntar! gracias por las ayuda de nuevo!

Pero porque sacar el for de dentro de la función?

Código HTML:

<script type="text/javascript">
//<![CDATA[
function ciudad(c){
var html="";
 for (i=0; i<5; i++)
 {
 html=html+"<img src='imagenes/"+c+ i +".jpg'/>";
 }
 alert(html);
}
//]]>
</script>
<button onclick="ciudad(this.innerHTML)">cordoba</button>
<button onclick="ciudad(this.innerHTML)">madrid</button>
 

Asi hacés de ciudad una variable
Saludos

[mpaunero10]

function desplegable (mario) {
var html="";
for (i=0; i<5; i++)
{
html=html+"<img onClick='cambioimg()' src='imagenes/lugares/"+mario+"/"+mario+"0"+ i +".jpg'/>";
}
document.getElementById("lug_drc").innerHTML= "<div id='opciones'><h1>"+mario+"</h1><img style='cursor:pointer' onClick='desaparece()' src='imagenes/iconos/gmenos.gif'/><h2>Lugar y país:"+mario+"</h2><h3>Fecha</h3><p>Mapa</p><div id='lugares_mini'>"+html+"</div></div>";
}

[mpaunero10]

Me ha salido, muy buena idea compañero. Ahora voy a añadir algunas cosillas y os enseño el resultado. Si quieres echar un ojo a mi web y me dices tu opnión?
www.marcospaunero.com. Esta hecho todo a base de javascript.

[emprear]

se la vé prolija, yo le daría un poco mas de demora al slider en modo automático.
Y cuando puedas limpiá y ordenáel html

Saludos

[mpaunero10]

Gracias, aumente el tiempo de 3 a 5 segundos.

Respecto a lo otro no entiendo muy bien a que te refieres, supongo que al no tener mucha idea no haya conseguido hacer la web más ligeramente posible. Pero diseño y demás, bien,no?

[emprear]

Son detalles, como el ordenamiento del javascript (aunque como tenés tanto habría que hacerlo con cuidado)
Otro detalle, optimizar tus imágenes, por ejemplo
https://googledrive.com/host/0B5cDQ-...mg/portada.jpg
pesa 60kb conta 380kb de la tuya, y supongo que la relación con las otras será similar

SAludos

[mpaunero10]

Gracias por tu ayuda. Le estoy dando una vuelta de tuerca más a la galería y necesitaria vuestro consejo:

Intento que el número tope del ciclo for que ahora es 9, se vaya cambiando automaticamente según el numero de titulos de su ciudad, es decir, el número de fotos total. Entonces cuento el array con .length y usando la variable de ciudad que es mario. mario.length, pero lo que me hace es contarme el numero de letras de la ciudad y no de su array. A ver que os parece


tit_santander = ['t1','titulo2','titulo3','titulo4','santander5','s eis','siete'];
tit_cordoba = ['t1','titulo2','titulo3','titulo4','santander5','s eis','siete'];
tit_londres = ['t1','titulo2','titulo3','titulo4','santander5','s eis','siete'];
tit_oviedo = ['t1','titulo2','titulo3','titulo4','oviedo5','seis ','siete'];
tit_cantabria = ['t1','titulo2','titulo3','titulo4','cantrabra5','s eis','siete'];
manolo = ['t1','titulo2','titulo3','titulo4','colonia5','sei s','siete'];

function desplegable (mario,pato,lolo) {
var html="";
var ciudad = "tit_" + mario;
var total = ciudad.length;

for (i=0; i<total; i++)
{
html=html+"<img style='cursor:pointer' onClick=\"cambio('"+mario+"','"+i+"','"+pato+"')\" src='imagenes/lugares/"+mario+"/"+mario+"0"+ i +".jpg'/>";
}

document.getElementById("lug_drc").innerHTML= "<div id='opciones'><img style='cursor:pointer' onClick=\"desaparece('"+mario+"','"+pato+"','0')\" src='imagenes/iconos/lugmenos.png'/><h1>Titulo: "+manolo[lolo]+"</h1><h2 class='lugarypais'>Lugar y país: </h2><h4 class='lugarypais'>"+mario+"</h4><h4 class='lugarypais'>"+pato+"</h4><br/><h3 class='lugarypais'>Fecha:</h3><div id='lugares_mini'>"+html+"</div></div>";
}