aタグクリック時にPHPにデータを渡したい

Question

以下のように１つのレコードに複数の画像データ(blob)を持つデータベースから全てのレコードを取りだして各レコードの１番目の画像(pic1)を使ってサムネにしてリスト表示にし、そのサムネイルをクリックするとモーダルが開きそのレコードの２枚目以降の画像も全て表示するというページを作くろうとしています。

ただリスト内のサムネイルはaタグで囲まれてるだけなので、クリックしたサムネイルのレコードの配列要素番号をモーダル画面内で取得できないため、何番目の画像なのか分からず画像データを特定できません。どのようにすれば、要素番号をモーダルの描画処理の方に渡すことができるでしょうか？
モーダル自体はBootStrap4を使っています。

---

テーブル名：gallery
カラム名：| id | pic1 | pic2 | pic3 | pic4 |
✏️ pic1は必須

    $sql = 'SELECT * FROM gallery ORDER BY created_at DESC';
    $stmt = $pdo->prepare($sql);
    $stmt->execute();
    $images = $stmt->fetchAll();

<!-- リスト部分 -->
  <div class="list">
      <ul class="list-unstyled">
          <?php for ($i = 0; $i < count($images); $i ++): ?>
              <li class="media">
                 <a href="#myModal" data-toggle="modal">
                 <?php if ($images[$i]['pic1'] !== ''): ?>
                 <img src="image.php?id=<?= $images[$i]['id']; ?>&file=1" style="width:150px;" height="auto">
                 <?php endif; ?>
                 </a>
              </li>
          <?php endfor; ?>
      </ul>
  </div>
  
 <!-- モーダル部分 -->
  <div class="modal" id="myModal" tabindex="-1" role="dialog" data-ride="">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <img src="image.php?id=<?= $images[$i]['id']; ?>&file=1" style="width:100%;" height="auto" class="mr-3">
          <?php if (isset($images[$i]['pic2'])): ?>
            <img src="image.php?id=<?= $images[$i]['id']; ?>&file=2" style="width:100%;" height="auto" class="mr-3">
          <?php endif; ?>
          <?php if (isset($images[$i]['pic3'])): ?>
           <img src="image.php?id=<?= $images[$i]['id']; ?>&file=3" style="width:100%;" height="auto" class="mr-3">
          <?php endif; ?>
          <?php if (isset($images[$i]['pic4'])) : ?>
           <img src="image.php?id=<?= $images[$i]['id']; ?>&file=4" style="width:100%;" height="auto" class="mr-3">
          <?php endif; ?>
        </div>
      </div>
    </div>
  </div>
     

image.php

require_once 'function.php';
$pdo = connectDB();
$sql = 'SELECT * FROM jirei WHERE id = :image_id LIMIT 1';
$stmt = $pdo->prepare($sql);
$stmt->bindValue(':image_id', (int)$_GET['id'], PDO::PARAM_INT);
$stmt->execute();
$image = $stmt->fetch();

if($_GET['file'] == 1){
 header('Content-type: ' . $image['image_type']);
 echo $image['pic1'];
} else if($_GET['file'] == 2){
 header('Content-type: ' . $image['image_type']);
 echo $image[' pic2'];
} else if($_GET['file'] == 3){
 header('Content-type: ' . $image['image_type']);
 echo $image['pic3'];
} else if($_GET['file'] == 4){
 header('Content-type: ' . $image['image_type']);
 echo $image['pic4'];
}
exit();

---

実は色々参考にしたサンプルコードの中には、ほぼ同じ構成で、モーダル内で画像群をカルーセルにするところだけが違うサンプルがありました。aタグに data-slide-to属性を置けばクリックされたサムネイルが取得データ配列($images)の何番目かをモーダルの処理の方にも渡せてるものがありましたが、今回はカルーセルでないし、できるだけBootStrapそのものの機能は省きたいので、なにかいい方法がないかと思い質問しています。

<a href="#myModal" data-toggle="modal" data-slide-to="<?= $i; ?>">

Answer 1

jsで特定のaクリック時にimgのurlをimage.php?file=xxxに書き換えればよいでしょう

Comments

[Fujiman]

気がつくのがおそくなりましてすみません。なるほどそうですね。シンプルですが思いつきませんでした

<a href="image.php?id=<?= $images[$i]['id']; ?>&file=1">
<img src="image.php?id=<?= $images[$i]['id']; ?>&file=1" style="width:100px;" class="mr-3">
</a>