Lijy 6 месяцев назад
Родитель
Сommit
860bd49d0d

+ 52 - 0
fhKeeper/formulahousekeeper/webttkuaiban/src/main/resources/static/knowledgeDetails.ftl

@@ -122,6 +122,20 @@
         </div>
       </div>
     </div>
+
+    <div class="modal" id="imageModal">
+      <div class="layout" id="modalLayout>
+        <button class="prev" id="prevBtn">
+          <img src="/image/customer/zuo.png" />
+        </button>
+        <div class="modalImage">
+          <img id="modalImage" src="" alt="Preview">
+        </div>
+        <button class="next" id="nextBtn">
+          <img src="/image/customer/you.png" />
+        </button>
+      </div>
+    </div>
   </div>
 </body>
 <script src="/js/js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
@@ -193,5 +207,43 @@
       }
   }
   reinitIframe()
+
+  $(document).ready(function() {
+    const images = $('#hypertextContent img');
+
+    images.on('click', function() {
+      currentImageIndex = images.index(this); 
+      $('#modalImage').attr('src', $(this).attr('src'));
+      $('#imageModal').fadeIn();
+      updateButtons();
+    });
+
+    $('#prevBtn').on('click', function() {
+      if (currentImageIndex > 0) {
+        currentImageIndex--;
+        $('#modalImage').attr('src', $(images[currentImageIndex]).attr('src'));
+        updateButtons();
+      }
+    });
+
+    $('#nextBtn').on('click', function() {
+      if (currentImageIndex < images.length - 1) {
+        currentImageIndex++;
+        $('#modalImage').attr('src', $(images[currentImageIndex]).attr('src'));
+        updateButtons();
+      }
+    });
+
+    function updateButtons() {
+      $('#prevBtn').prop('disabled', currentImageIndex === 0);
+      $('#nextBtn').prop('disabled', currentImageIndex === images.length - 1);
+    }
+
+    $('#modalLayout').on('click', function(event) {
+      if ($(event.target).is('#modalLayout')) {
+        $('#imageModal').fadeOut();
+      }
+    });
+  });
 </script>
 </html>