I am trying to display an image in my table and then use jQuery to pop up a modal with the full-screen image. However, the image only pops up at the top of the table data.
This is the code I have so far:
<tbody>
<tr>
<td><?php echo $i++;?></td>
<td><?php echo $d['tanggal_komplain'];?></td>
<td><?php echo $d['nama_komplainer'];?><?php echo $d['pembuat'];?></td>
<td><?php echo $d['departemen_tujuan'];?></td>
<td><?php echo $d['personil_tujuan'];?></td>
<td><?php echo $d['subject'];?></td>
<td><?php echo $d['isi_komplain'];?></td>
<td><?php echo $d['status'];?></td>
<td class="align-middle text-center perbesar">
<a href="#" id="pop">
<img id="imageresource" src="image/<?php echo $d['nama_gambar']; ?>" width="80" height="80">
</a>
</td>
</tr>
</tbody>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 400px; height: 264px;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('#imageresource').attr('src')); // here assign the image to the modal when the user clicks the enlarge link
$('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then I use the show function
});
</script>
I'm hoping someone can offer some assistance with this issue :((