From 372a3d6c44b84b9ba74a26fa4ccb953c64e67ee8 Mon Sep 17 00:00:00 2001
From: Akito Omura <kaisei9211@gmail.com>
Date: Thu, 28 Aug 2025 02:01:12 +0000
Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E5=83=8F=E6=8B=A1=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controllers/image_modal_controller.js     |  1 +
 app/views/photo_spots/show.html.erb           | 46 +++++++++++++++----
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/app/javascript/controllers/image_modal_controller.js b/app/javascript/controllers/image_modal_controller.js
index 0b11fa7..c79e392 100644
--- a/app/javascript/controllers/image_modal_controller.js
+++ b/app/javascript/controllers/image_modal_controller.js
@@ -18,6 +18,7 @@ export default class extends Controller {
     this.showImage(this.indexValue);
     this.modalTarget.classList.remove("hidden");
     this.updateNavigationButtons();
+    console.log("image-modal#openが呼ばれた");
   }
 
   // モーダルを閉じる
diff --git a/app/views/photo_spots/show.html.erb b/app/views/photo_spots/show.html.erb
index 3943395..8880f23 100644
--- a/app/views/photo_spots/show.html.erb
+++ b/app/views/photo_spots/show.html.erb
@@ -1,5 +1,6 @@
 <% content_for :title, @photo_spot.name %>
-<div class="container mx-auto px-4 py-6">
+<div  data-controller="image-modal">
+ <div class="container mx-auto px-4 py-6">
   <% if notice.present? %>
     <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded mb-6">
       <%= notice %>
@@ -32,17 +33,20 @@
     <% if @photo_spot.images.attached? %>
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
         <% @photo_spot.images.limit(6).each_with_index do |image, index| %>
-          <div class="relative group aspect-video overflow-hidden rounded-lg shadow-sm">
-            <%= image_tag image.variant(resize_to_fill: [400, 225]),
-                class: "w-full h-full object-cover group-hover:shadow-md transition-shadow duration-200",
-                alt: "#{@photo_spot.name}の画像#{index + 1}" %>
-            <% if index == 5 && @photo_spot.images.count > 6 %>
-              <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
-                <span class="text-white text-lg font-semibold">
+          <div class="relative group aspect-video overflow-hidden rounded-lg shadow-sm cursor-pointer"
+               data-action="click->image-modal#open"
+               data-image-modal-index-value="<%= index %>"
+               data-image-modal-images-value="<%= @photo_spot.images.map { |i| url_for(i) }.to_json %>">
+             <%= image_tag image.variant(resize_to_fill: [400, 225]),
+                 class: "w-full h-full object-cover group-hover:shadow-md transition-shadow duration-200",
+                 alt: "#{@photo_spot.name}の画像#{index + 1}" %>
+             <% if index == 5 && @photo_spot.images.count > 6 %>
+               <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+                 <span class="text-white text-lg font-semibold">
                   +<%= @photo_spot.images.count - 6 %>枚
                 </span>
-              </div>
-            <% end %>
+               </div>
+              <% end %>
           </div>
         <% end %>
       </div>
@@ -56,6 +60,26 @@
       <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
         <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
       </svg>
+      <div data-image-modal-target="modal"
+     class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-75 hidden">
+  <div class="relative w-full h-full max-w-5xl">
+    <div class="relative w-full h-full flex items-center justify-center">
+      <img data-image-modal-target="image" class="max-w-full max-h-screen object-contain" alt="Enlarged image">
+      <!-- 閉じるボタン -->
+      <button data-action="click->image-modal#close" class="absolute top-4 right-4 text-white text-4xl">
+        &times;
+      </button>
+      <!-- 左右の矢印ボタン -->
+      <button data-action="click->image-modal#previous" data-image-modal-target="prevBtn"
+              class="absolute left-4 top-1/2 -translate-y-1/2 text-white text-5xl">
+        &lsaquo;
+      </button>
+      <button data-action="click->image-modal#next" data-image-modal-target="nextBtn"
+              class="absolute right-4 top-1/2 -translate-y-1/2 text-white text-5xl">
+        &rsaquo;
+      </button>
+    </div>
+  </div>
       レビュー
     </h2>
     <div class="space-y-4">
@@ -82,4 +106,6 @@
     <%= link_to "フォトスポット一覧に戻る", photo_spots_path, 
         class: "inline-flex items-center px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50" %>
   </div>
+ </div>
+</div>
 </div>