jQuery 图片查看器插件 Viewer.js用法简单示例

简介

Viewer.js 是一款基于 jQuery 的简单易用图片查看器插件，可以快速实现图片预览和查看，支持常见的文件格式，并且使用方便。

安装

可以直接在官方网站下载 Viewer.js 的压缩包，或者通过其他方式获取插件的源代码。

下载

可以访问官方网站下载完整版或者压缩版的 Viewer.js 插件。

CDN

也可以使用 CDN 方式引入 Viewer.js。

<!-- 引入 Viewer.js -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.9.0/viewer.css">
<script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.9.0/viewer.js"></script>

使用

下面介绍 Viewer.js 的使用。

HTML

在 HTML 页面中增加需要预览的图片。

<div>
  <img src="/path/to/image1.jpg" data-original="/path/to/image1.jpg" alt="image1">
</div>
<div>
  <img src="/path/to/image2.jpg" data-original="/path/to/image2.jpg" alt="image2">
</div>

其中，img 标签中的 src 属性可以设置图片的缩略图，而 data-original 属性则设置图片的原图路径。

JavaScript

在页面加载完成之后，初始化 Viewer.js 插件并绑定图片事件。

$(document).ready(function() {
  // 初始化 Viewer.js
  var viewer = new Viewer(document.querySelector('img'), {
    // 配置项
  });

  // 绑定图片事件
  $('img').on('click', function () {
    viewer.view(this);
  });
});

其中，Viewer.js 的配置项可以按需设置，比如 title 属性可以设置图片的标题。而 viewer.view(this) 则是绑定图片点击事件，使得点击缩略图可以查看大图。

示例1

下面是一个简单的示例，展示了如何使用 Viewer.js 实现图片预览和查看。

<!DOCTYPE html>
<html>
  <head>
    <title>Viewer.js 示例</title>
    <!-- 引入 Viewer.js -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.9.0/viewer.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.9.0/viewer.js"></script>
  </head>
  <body>
    <div>
      <img src="https://goss.veer.com/creative/vcg/veer/1600water/veer-127986216.jpg" data-original="https://goss.veer.com/creative/vcg/veer/800water/veer-127986216.jpg" alt="image1">
    </div>
    <div>
      <img src="https://goss.veer.com/creative/vcg/veer/1600water/veer-229065389.jpg" data-original="https://goss.veer.com/creative/vcg/veer/800water/veer-229065389.jpg" alt="image2">
    </div>
    <script>
      // 初始化 Viewer.js
      var viewer = new Viewer(document.querySelectorAll('img'), {
        title: function (image) {
          return image.alt;
        }
      });

      // 绑定图片事件
      $('img').on('click', function () {
        viewer.view(this);
      });
    </script>
  </body>
</html>

该示例中显示了两张图片，点击缩略图即可查看原图，并且原图上有对应的标题。

示例2

下面是一个示例，展示了 Viewer.js 在实际项目中的应用。

<!DOCTYPE html>
<html>
  <head>
    <title>Viewer.js 示例</title>
    <!-- 引入 Viewer.js -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.9.0/viewer.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.9.0/viewer.js"></script>
  </head>
  <body>
    <div>
      <img src="https://goss.veer.com/creative/vcg/veer/1600water/veer-127986216.jpg" data-original="https://goss.veer.com/creative/vcg/veer/800water/veer-127986216.jpg" alt="image1">
      <div class="desc">这是一张美丽的图片</div>
    </div>
    <div>
      <img src="https://goss.veer.com/creative/vcg/veer/1600water/veer-229065389.jpg" data-original="https://goss.veer.com/creative/vcg/veer/800water/veer-229065389.jpg" alt="image2">
      <div class="desc">这是另一张美丽的图片</div>
    </div>
    <script>
      // 初始化 Viewer.js
      var viewer = new Viewer(document.querySelectorAll('img'), {
        title: function (image) {
          return image.alt;
        }
      });

      // 绑定图片事件
      $('img').on('click', function () {
        viewer.view(this);
      });

      // 点击图片自动放大
      $('img').on('mouseenter', function () {
        viewer.zoomTo(1);
      });

      // 鼠标移出后自动缩小
      $('img').on('mouseleave', function () {
        viewer.zoomTo(0);
      });
    </script>
  </body>
</html>

该示例中，图片下面增加了图片描述，并且增加了额外的交互效果，比如鼠标移入时自动放大，移出时自动缩小。这些交互效果可以通过 Viewer.js 提供的接口轻松实现。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 图片查看器插件 Viewer.js用法简单示例 - Python技术站

jQuery 图片查看器插件 Viewer.js用法简单示例