Question

我尝试为我的数据库中的所有图片缩略图制作响应式图像。缩略图正在显示，但是当我点击它时，所有缩略图仅显示第一张图像。为什么会这样？

这是查看文件

中的几行代码

<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>

这是来自模型

的代码

<? 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();
    }
  }
} ?>

这是来自控制器

<? 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);

  }
} ?>

这是结果页面 enter image description here

查看文件列。如果我晃动图像，它只显示第一行的图像。当我点击其他图片时，它也会显示第一张图片。

Answer 1

我在您的视图代码中看到了，您尝试通过以下方式获取图片 e.relatedTarget用于修改你的模态。

错误：

你确实循环了模态，但声明了相同的id，它写得如下：

<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">

如果你在浏览器中检查元素，你会发现你有很多具有相同id的模态。

方法解决方案：

从循环条件中移出模态，并尝试通过onclick事件监听器在您的真实图像中修改它。

代码提供（未经测试）：

<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>

<强>解释因此，当您点击图片时，它会触发function photoModal()将src属性发送给模态，然后将其更改为更改模态内的src图片

Answer 2

我已经用一些代码欺骗了它。我的目的是使图像更大，以便用户可以阅读。 ps：我已经删除了模态。

这是我在视图

中的代码

＆＃13;

<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>

＆＃13;

如果你有另一种方法让模态正常工作，请告诉我。谢谢。 ^^，

我在模式响应中的模态仅显示来自数据库

2 个答案: