【Layui】图片预览-文件/图片上传组件-LS'Blog-保定PHP程序员老宋个人博客

【Layui】图片预览-文件/图片上传组件

2024-08-28 阅读 368 评论 0 点赞 0

摘要：要在 layui 中点击图片实现预览功能，你可以使用 layui 的 layer.photos 方法来轻松实现图片预览。以下是如何在点击图片时使用 layer.photos 来创建图片预览的示例代码：

要在 layui 中点击图片实现预览功能，你可以使用 layui 的 layer.photos 方法来轻松实现图片预览。以下是如何在点击图片时使用 layer.photos 来创建图片预览的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui Image Preview</title>
  <link rel="stylesheet" href="path/to/layui/css/layui.css">
  <script src="path/to/layui/layui.js"></script>
</head>
<body>

<div class="images-container">
  <img class="preview-image" src="path/to/image1.jpg" alt="Image 1">
  <img class="preview-image" src="path/to/image2.jpg" alt="Image 2">
  <img class="preview-image" src="path/to/image3.jpg" alt="Image 3">
</div>

<script>
layui.use(['layer'], function() {
  var layer = layui.layer;

  // 点击事件处理
  $('.preview-image').on('click', function() {
    var images = []; // 存放图片信息的数组
    var currentImage = this.src;
    
    // 获取所有图片信息
    $('.preview-image').each(function() {
      images.push({
        alt: $(this).attr('alt'),
        src: $(this).attr('src')
      });
    });
    
    // 在弹窗中预览图片
    layer.photos({
      photos: {
        title: '图片预览', // 弹窗标题
        data: images,
        start: images.findIndex(img => img.src === currentImage) // 从当前图片开始预览
      },
      shadeClose: true, // 点击遮罩关闭弹窗
      closeBtn: 2 // 显示关闭按钮
    });
  });
});
</script>

</body>
</html>

在上述示例代码中，我们创建了一个包含多个图片的容器，然后为每个图片添加了共同的类名 preview-image。通过点击图片，会触发 layer.photos 方法，该方法可以用来创建一个图片预览弹窗。我们使用一个包含图片信息的数组来配置预览图片，其中 title 为弹窗标题，data 包含图片信息，start 指定从数组中的哪个索引开始预览。

请注意，替换代码中的图片 URL 和其他相关信息。此示例为演示目的，你可以根据实际需求进行调整和修改。

标签：layui