[SOLUCIONADO] Fallo al concatenar

chachek · #1 (**permalink**) 27/11/2014, 16:32

Buenas noches amigos, aunque este sea mi 2º mensaje os leo casi a diario y debido a mi timidez no suelo hablar ni por los foros jeje.

Bueno tengo un dolor de cabeza que no me deja continuar...
Estoy haciendo una web con ventanas modales y necesito hacer la funcion que me genere los links y las ventanas modales, el codigo html + javascript funciona correctamente, pero cuando meto en codigo dentro del echo " "; el javascript no responde, yo creo que es por la concatenacion que no esta hecha correctamente, he probado varias opciones pero no consigo que se muestre la ventana.

Este es el codigo
<html>
<head>
<style>
ul{padding:0;}
.span3{width:10%;}
.thumbnail>img{display:block;max-width:100%;max-height:100%;margin:auto auto; padding:1%; border: 1px solid #444;}
.thumbnail img:hover { border: 1px solid #08f;}
.overlay{ display: none;position: absolute; top: 0;left: 0;width: 100%;height: 100%; background: #000;z-index:1;opacity:.75;-moz-opacity: 0.75;filter: alpha(opacity=75);}
.modal { display: none; position: absolute;top: 15%; left: 25%; width: 50%;height: auto;color: #333; padding:10px; z-index:2; overflow: hidden;}
.img{ max-width:100%;border: 1px solid #fff; }
</style>
</head>
<body>

<div id='fade' class='overlay' onClick = " document.getElementById('light').style.display='no ne'; document.getElementById('fade').style.display='non e' "></div>

<li class='span3'>
<a class='thumbnail' href = 'javascript:void(0)' onClick = " document.getElementById('light').style.display='bl ock' ; document.getElementById('fade').style.display='blo ck' ">
<img src='http://ru.fishki.net/picsw/012013/15/post/foto/foto-0001.jpg'/>
</a>
</li>

<div id='light' class='modal'>

<img class='img' src='http://ru.fishki.net/picsw/012013/15/post/foto/foto-0001.jpg' />
</div>

<?php
echo"
<div id='fade' class='overlay' onclick = '"."document.getElementById('light').style.display ='none'; document.getElementById('fade').style.display='non e'"."'></div>

<li class='span3'>
<a class='thumbnail' href = 'javascript:void(0)' onclick = '"."document.getElementById('light').style.display ='block' ; document.getElementById('fade').style.display='blo ck'"."'>
<img src='http://ru.fishki.net/picsw/012013/15/post/foto/foto-0001.jpg'/>
</a>
</li>

<div id='light' class='modal'>

<img class='img' src='http://ru.fishki.net/picsw/012013/15/post/foto/foto-0001.jpg' />
</div>
";
?>

</body>
</html>

pateketrueke · #2 (**permalink**) 27/11/2014, 16:43

Desde luego que está mal la concatenación: no puedes combinar comillas a la ligera, hay reglas de sintaxis al respecto de las comillas por cada lenguaje ahí metido.

Es decir, PHP tiene sus comillas, y dentro HTML también usa comillas, a su ves Javascript también tiene comillas.

¿Entiendes el dilema?

Por favor, lee el siguiente tema: http://www.forosdelweb.com/f18/como-...s-bien-588701/

chachek · #3 (**permalink**) 27/11/2014, 16:48

ok, me leeré el tema tranqulamente. La verdad que no suelo tener problemas en la concatenación en php pero esta se me resiste, será por estar un poco pez en javascirpt??

pateketrueke · #4 (**permalink**) 27/11/2014, 17:17

Cita:

Iniciado por chachek

[...] será por estar un poco pez en javascirpt??

Algo así, a decir verdad no importa que lenguaje sea: el problema es la combinación de comillas cuando éstas tienen significado.

Básicamente es el tema de "comillas dentro de comillas" lo que debes entender.

chachek · #5 (**permalink**) 28/11/2014, 03:03

Conseguido!

$light = "light1";
$fade = "fade1";

<a class="thumbnail" href = "javascript:void(0)" onclick = "document.getElementById(\''.$light.'\').style.dis play=\'block\' ; document.getElementById(\''.$fade.'\').style.displ ay=\'block\' ">

Gracias por el Link con el Manual de concatenación!!