my modal in image responsive show only first row image from database - image

Question

I tried to make responsive image for all image thumbnail from my database.
the thumbnail is showing, but when I clicked it, all of it display the first image only. why this is happening?
here is a few line code from view file
<div data-toggle="modal" data-target="#myModal">
<table id="dynamic-table" method="post" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Tanggal Mulai</th>
<th>Tanggal Akhir</th>
<th>Alasan</th>
<th>File</th>
<th>Nopeg</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php foreach ($hasil->result() as $row) { ?>
<tr>
<td>
<?php echo $row->no ?></td>
<td>
<?php echo $row->nama ?></td>
<td>
<?php echo $row->tglm ?></td>
<td>
<?php echo $row->tgla ?></td>
<td>
<?php echo $row->alasan ?></td>
<td>
<img src="<?php echo base_url().'uploads/'.$row->file ?>" height="75">
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="<?php echo base_url().'uploads/'.$row->file ?>" class="img-responsive">
</div>
</div>
</div>
</div>
</td>
<td>
<?php echo $row->nopeg; ?></td>
<td>
<button type="button" class="btn btn-pink btn-sm">Terima</button>
<button type="button" class="btn btn-info btn-sm">Tolak</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(e) {
var image = $(e.relatedTarget).attr('src');
$(".img-responsive").attr("src", image);
});
});
</script>
</div>
here is a code from model
<? php
class Model_data_cuti extends CI_Model {
public
function getdata() {
$hasil = $this - > db - > query("SELECT * FROM form");
return $hasil;
}
public
function create($data_form) {
$this - > db - > insert('form', $data_form);
}
public
function find($no) {
$hasil = $this - > db - > where('no', $no) - > limit(1) - > get('form');
if ($hasil - > num_rows() > 0) {
return $hasil - > row();
} else {
return array();
}
}
} ?>
and this is from controller
<? php
if (!defined('BASEPATH')) exit('No direct script access allowed');
class Data_cuti extends CI_Controller {
function __construct() {
parent::__construct();
$this - > load - > model('model_data_cuti');
}
public
function index() {
$data['hasil'] = $this - > model_data_cuti - > getdata();
$this - > load - > view('data_cuti_view', $data);
}
} ?>
this is the result page
enter image description here
look at the file column. if i clicke th image, it only display image from first row. when i click others image, it display the first image too.

Answer 1

I see there in your view code, you tried to get the image by
e.relatedTarget for modify your modal.
Mistake :
You do loop the modals, but declare the same id, it was write such as :
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
If you inspect the element in your browser you will find that you have a lot of modals with the same id.
Approach Solution :
Just move out the modals from the loop condition, and try to modify it by onclick event listener inside of the true image of yours.
Code Provided ( Untested ) :
<td> <img onclick="photoModal('<?php echo base_url().'uploads/'.$row->file ?>');" src="<?php echo base_url().'uploads/'.$row->file ?>" height="75">
<script>
function photoModal(imgPath){
$('#myModal < div < div < div <img').attr("src",imgPath);
$('#myModal').modal('show');
}
</script>
Explanation
So, while you clicked the image, it will trigger function photoModal() to send the src attribute to the Modal and proccess it to change the src image inside of Modals

Answer 2

I already trick it with some code. My purpose is to make the image larger, so the user can read it.
ps: I already removed the modals.
here is my code in view
<table id="dynamic-table" method="post" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Tanggal Mulai</th>
<th>Tanggal Akhir</th>
<th>Alasan</th>
<th>File</th>
<th>Nopeg</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php foreach ($hasil->result() as $row) { ?>
<tr>
<td>
<?php echo $row->no ?></td>
<td>
<?php echo $row->nama ?></td>
<td>
<?php echo $row->tglm ?></td>
<td>
<?php echo $row->tgla ?></td>
<td>
<?php echo $row->alasan ?></td>
<td>
<a class="thumbnail" href="<?php echo base_url().'uploads/'.$row->file ?>">
<img src="<?php echo base_url().'uploads/'.$row->file ?>" width="50" height="50">
</a>
</td>
<td>
<?php echo $row->nopeg; ?></td>
<td>
<button type="button" class="btn btn-pink btn-sm">Terima</button>
<button type="button" class="btn btn-info btn-sm">Tolak</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
if you have another way to make the modal working right, just tell me. thanks. ^^,