Muy buenas,
Tengo el siguiente problema con un código bastante simple (creo).
En un .php tengo 10 imágenes con el nombre justo debajo. Si pincho en la imágenes, se abre un dialog con mas información como el teléfono y la dirección.
El código funciona perfectamente solo para la primera imagen. Es decir, si pincho en la primera imagen (o en el nombre), me salta el dialog con la info, pero si pincho en cualquier otra, no pasa nada.
Os dejo el código a ver si alguien me puede ayudar:
Javascript
:
Código:
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
dialog.showModal();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};
Parte relevante donde ocurre la "magia":
Código PHP:
//Show the image with some data for it
<div id="show">
<img src="images/<?php echo $row1["name"]; ?>.png" alt="<?php echo $row1["name"]; ?>" title="<?php echo $row1["name"]; ?>" width="50" height="50"><br>
<div>
<span class="nameBox">
<?php echo $row1["name"]; ?></span>
</div>
</div>
//The dialog which will appear after clicking on the image
<dialog class="myDialog" id="1">
<span id="close">x</span>
<h3 class="headerDialog"><?php echo $row1["name"]; ?></h3>
<p style="background: black; color: white">phone: <?php echo $row["phone"]; ?><br>
address: <?php echo $row["address"]; ?></p>
</dialog>
Como digo, funciona bien pero solo para una imagen...cómo puedo hacer para que funcione para todas?
Gracias por anticipado,
Un saludo!