how to popup images by click from the table column on the screen

Question

I am new to PHP and Java Script. i have a table where there are 5 rows and 3 column. in every row there is an image which shown in the column. the image path is stored in the db table. so when i fetch the result from db table, images are shown properly. i am using js and css to popup the image when click. But the problem is only top row of the image is popup and other images can't popup. here is the php code:

<table align = "center" border="1" cellspacing="7" cellpadding="7"> 
 <tr>
    <th>S.No.</th><th>Service ID</th><th>Service Type</th></th><th>Alloted Serviceman</th><th>service/Complaint Detail</th><th>Current Status</th><th>Service/Complaint Date</th><th>Payment</th><th>Service image</th>
</tr>
<?php
while($row1 = mysqli_fetch_array($result1))
{
?>

<tr>
    <td><?php echo ++$i;?></td><td><a href="servicedetail.php?scode=<?php echo $row1['service_id'];?>"><?php echo $row1['service_id'];?></a></td><td><?php echo $row1['service_type'];?></td><td><?php echo $row1['technician_name'];?></td><td style="max-width:200px;"><?php echo $row1['service_detail'];?></td><td><?php if ($row1['status'] == 1) { echo "Confirmed" ;} else { echo "Pending"; }?></td><td><?php echo $row1['service_date'];?></td><td><?php echo $row1['service_charges'];?></td><td><img id="myImg" src = "./<?php echo $row1['s_image'];?>" alt= "upload image" height="50" width="80"/></td>
</tr>

<?php } ?>
</table>
</fieldset>
<!-- The Modal -->                              
 <div id="myModal" class="modal">
  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">
  <!-- Modal Caption (Image Text) -->
</div>

below is java script file code which help to popup image

// Get the modal
var modal = document.getElementById('myModal');
//window.alert(modal);
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}

it show all images in the table column. but only top of the row image is popup up. on other i click on the image but it can't popup. please provide the solution. Thanks..

Nick Li · Answer 1 · 2017-05-01T22:09:05.413

1

there should only be one unique id in HTML

Instead of id, use class, and use the document met getElementByClassName() instead, which fetch all nodes in an array

EDIT: I was in bed and I don't like to use the editor on phone

An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element in the source code.

Therefore:

<img class="myImg"

img = document.getElementByClassName('myImg');

edited May 01 '17 at 22:09

answered May 01 '17 at 14:03

Nick Li

312
2
12

Thanks for ur response.i appreciate ur suggestion. It would be more helpful if u explain with an example. – J.S. Bajaj May 01 '17 at 17:23
I don't see your code but I can already guess what your problem would be. Hint: what is returned from getElementByClassName()? If you still cannot search for question 13667533 – Nick Li May 02 '17 at 06:19
i made changes but nothing work i post the code here which i add in js file `code` var modal = document.getElementsByClassName('modal'); var img = document.getElementsByClassName('myImg'); //var modalImg = document.getElementById("img01"); var modalImg = document.getElementsByClassName("modal-content"); //window.alert(modal-content); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; } var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; } – J.S. Bajaj May 02 '17 at 06:34
what you pasted is not readable, read this and see if that solve your problem, if not you probably have made so much changes in your code you probably should just post a new question and reinstate what is the problem again http://stackoverflow.com/questions/13667533/getelementsbyclassname-onclick-issue – Nick Li May 02 '17 at 06:39
its working like a charm. your suggestion help me to develop the code. – J.S. Bajaj May 02 '17 at 06:51
Accept this answer when you can then, glad to be of help – Nick Li May 02 '17 at 06:53

score 1 · Answer 2 · answered May 02 '17 at 06:55

with the help of Stackoverflow user i am able to solve the problem here is the code

 var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementsByClassName('myImg');
//window.alert(img);
var i = img.length;
var j;
var modalImg = document.getElementById("img01");

//var captionText = document.getElementById("caption");
for(j=0;j<i;j++) {
    img[j].onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
  //  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");

// When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
  modal.style.display = "none";
}
}

i just add class myImg in image tag use in php

Thank you so much for the fix just to close the modal you need to add var span = document.getElementsByClassName("close")[0]; — TeeJay, Nov 05 '18 at 08:50

how to popup images by click from the table column on the screen

2 Answers2