jquery调用图片查看器

jQuery 调用图片查看器通常是指使用 jQuery 插件或者自定义代码来实现一个简单的图片查看功能。这种查看器允许用户在一个弹出窗口或者覆盖层中查看图片，而不是直接在网页上浏览。

基础概念

jQuery: 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。
图片查看器: 是一个用户界面组件，用于展示图片，并提供缩放、旋转、滑动浏览等功能。

类型

弹出式查看器: 图片在点击后在一个新的弹出窗口或模态框中显示。
全屏查看器: 用户可以点击图片进入全屏模式查看。
画廊查看器: 多张图片可以像画廊一样展示，用户可以滑动浏览。

应用场景

产品展示: 在电商网站上展示商品图片。
摄影网站: 展示摄影师的作品集。
社交媒体: 用户可以查看和分享图片。

示例代码

以下是一个简单的 jQuery 图片查看器的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 图片查看器示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
  }
  .modal-content {
    display: block;
    margin: auto;
    width: 80%;
    max-width: 700px;
  }
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }
</style>
</head>
<body>

<img id="myImg" src="img_snow.jpg" alt="Snow" width="300" height="200">

<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
$(document).ready(function(){
  $("#myImg").click(function(){
    $("#myModal").css("display","block");
    $("#img01").attr("src", this.src);
    $("#caption").text(this.alt);
  });

  $(".close").click(function(){
    $("#myModal").css("display","none");
  });
});
</script>

</body>
</html>