npm 包 media-viewer 使用教程

现今，网站中使用媒体文件已经很普遍了，其中包括图片、视频、音频等。那么当我们需要在网站中展示这些媒体文件时，如何做到让它更美观、易用呢？答案就是使用图片预览库。在这里，我们介绍一款将官方媒体库整合成一张功能完善的图片预览库npm包 media-viewer 。

安装 media-viewer

使用 npm 在项目中安装 media-viewer

--- ------- ------------

快速上手

在 HTML 页面中引入 CSS 和 JS。

----- ---------------- -------------------------------- --
------- ----------------------------------------

对于图片预览，我们需要在页面中插入一个图片链接。这个链接的 data-media-viewer-src 属性指定了原始的图片地址， data-media-viewer-group 属性作为组别ID，在multiple at same page的时候，会将同组的图片连续预览，data-media-viewer-desc 属性作为image alt/title。

---- ---------------------- 
     --------------- 
     ------------------------------------ 
     -------------------------------- 
     ----------------------------------- -- --

在脚本中初始化图片预览：

--- ------ - --- ------------------------- -
    --------- ------
    ------------- ------------------------
    --------------- --------------------------
    -------------- ------------------------
---

现在，当用户单击图片时，就可以在当前页面中展示原始的图片。同时，用户还可以滚动整个页面翻转预览。

API

MediaViewer(options)

创建一个新的 MediaViewer 实例。

--- ------- - -

--
--- ------ - --- --------------------- ---------
  • selector: 用于获取要实例化的元素（必填）,能够通过querySelector获得的选择器均可,例如.>，#>等
  • options: 配置选项。

这个方法接受一个对象作为参数，具有以下属性：

  • selector(必填): 要实例化的 DOM 元素的选择器字符串。
  • urlAttribute: 包含图像 URL 的 DOM 元素上的属性名称。默认为 data-media-viewer-src。
  • groupAttribute: 图片分组的 DOM 元素上的属性名称。默认为 data-media-viewer-group。
  • descAttribute: 图片描述的 DOM 元素上的属性名称。默认为 data-media-viewer-desc。

viewer.view(index)

显示具有给定索引的图像。

---------------
  • index(必填): 要显示的图像的索引。

viewer.prev()

显示当前正在显示的图像的上一个图像。

--------------

viewer.next()

显示当前正在显示的图像的下一个图像。

--------------

示例代码

在这个示例中，我们将使用media-viewer在页面上实现图片预览效果。在这里，我们有四张图片，用户可以单击其中任意一张图片预览原始的图片。点击左右箭头图片可以上一页或者下一页，同时你还可以快速预览每张图片。

--------- -----
------
  ------
    ----- --------------- --
    ------------------- ------------
    ----- ---------------- ------------------------- --
    ------ ----------------
      ---------- -
        ---------- ------
        ------- - -----
        -------- - -----
        --------- ---------
        ----------- -------
      -

      ---------- -- -
        ------------ -----
        ---------- ----
        ------ -----
      -

      --------------- -
        ----------- -----
        -------- -----
        ---------- -----
        ---------------- -------
      -

      --------------- -- -
        ------ ------
        ------- ------
        ------- -----
        --------- -------
        -------------- ----
        ----------- - - --- -----
        --------- ---------
        ------- --------
      -

      --------------- -- --- -
        ------ -----
        ------- -----
        ----------- ------
        -------- ----
        ----------- ------- -----
      -

      --------------- -- --------- -
        -------- --
      -

      ----------- -
        ----------------- ------- -- -- -----
        ------ ------
        --------- ---------
        ------- --
        ----- --
        ------ -----
        -------- ----
      -

      ------
      ----- -
        --------- ---------
        ---- ----
        ----------- ------
        ------ -----
        ------- -----
        -------------- ----
        ----------------- ------- -- -- -----
        ------ ------
        ---------- ----
        ----------- -------
        ------- --------
      -

      ----- -
        ----- -----
      -

      ----- -
        ------ -----
      -

      -------------- -
        ----------------- ------- -- -- -----
        ------ ------
        ---------- ----
        -------- ----
        ------- --------
      -

      -------------- - -------------- -
        ------------ -----
      -

      -------------------- -
        -------- --
      -
    --------
  -------
  ------
    ---- ------------------
      ---------------- ---------
      --- -----------------------
        ----
          ---- -------------------- -------------- -- -------------------------------------- -------------------------------- ---------------------------------- --
          ---- ----------------------------------
        -----
        ----
          ---- -------------------- -------------- -- -------------------------------------- -------------------------------- ------------------------------- --
          ---- -------------------------------
        -----
        ----
          ---- -------------------- -------------- -- -------------------------------------- -------------------------------- ------------------------------- --
          ---- -------------------------------
        -----
        ----
          ---- -------------------- -------------- -- -------------------------------------- -------------------------------- ------------------------------ --
          ---- ------------------------------
        -----
      -----
      ---- --------- ----------------------
        ----
      ------
      ---- --------- ----------------------
        ----
      ------
    ------
    ------- ---------------------------------
    ------- -----------------------
      --- ------ - --- ------------------------------ -
        --------- -----
        ------------- ------------------------
        --------------- --------------------------
        -------------- ------------------------
      ---

      --- ------- - --------------------------------
      --- ------- - --------------------------------
      --------------------------------- ---------- -
        --------------
      ---
      --------------------------------- ---------- -
        --------------
      ---
    ---------
  -------
-------

总结

通过这个教程，我们介绍了如何使用 media-viewer 这个npm包在网站中实现图片预览功能。我们学习了如何安装、使用 media-viewer，以及如何使用 API 来操作媒体库。

Media-viewer提供了非常多好用的API，我们可以利用这些API完成更加定制化的预览效果。

感谢阅读！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5d51ab1864dac67109

阅读全文

猜你喜欢

  • npm 包 @indigoframework/agent 使用教程

    在前端开发中，我们通常会使用各种第三方资源来完成自己的项目，其中 npm 包是非常常见且便捷的选择。npm 是 Node.js 的包管理器，而 @indigoframework/agent 是一个 n...

    3 年前
  • npm 包 @indigocore/utils 使用教程

    介绍 在前端开发中，我们需要经常使用一些工具类库来完成一些常用的操作。而在 npm 的生态圈中，@indigocore/utils 是一款非常优秀的工具类库，它提供了很多常用的函数，如数组去重、时间格...

    3 年前
  • npm 包 @intervolga/bemdecl-loader 使用教程

    如果你正在开发一个基于前端技术的项目，并且需要管理 BEM（块、元素、修饰符）的命名规则和代码规范，那么 @intervolga/bemdecl-loader 可以帮助你更好地管理和维护代码。

    3 年前
  • npm包buzz.min.js使用教程

    介绍 在前端开发中，经常需要使用音频功能来增加用户体验。其中，buzz.min.js是一个轻量级的音频库，可以方便地在网站中播放音频文件。本文将介绍如何安装和使用buzz.min.js。

    3 年前
  • npm 包 @intervolga/bemdeps-loader 使用教程

    在前端开发中，BEM 是一种高效的 CSS 类名命名规范。使用 BEM 可以让我们更好地组织 CSS 文件，并且使 CSS 代码更加可维护和扩展。然而，当项目文件数量庞大时，手动维护 BEM 的依赖关...

    3 年前
  • npm 包 @indigoframework/ember-mapexplorer 使用教程

    介绍 @indigoframework/ember-mapexplorer 是一个基于 Ember.js 开发的前端插件，它提供了一些地图探索的功能。它可以通过设置地图的中心点、缩放级别以及标记点等方...

    3 年前
  • npm 包 @intervolga/bemrequire-loader 使用教程

    在前端开发中，使用 BEM 方法论能够有效提高项目代码的可维护性和可扩展性。但是，在开发过程中，如果没有合适的工具来处理样式文件中的 BEM 命名，会在一定程度上增加开发难度和工作量。

    3 年前
  • npm 包@intervolga/html-webpack-asset-template-plugin 使用教程

    前言 在前端开发中，构建工具对于现代化前端开发非常重要。而对于构建工具Webpack，构建流程中，html文件中引入的css和js等资源的自动化注入，是非常有必要的。

    3 年前
  • npm 包 @hypercubed/f-flat 使用教程

    前言 在前端开发中，工具的使用给我们带来了很多便利。而 npm 包 @hypercubed/f-flat 则是一个非常实用的工具，可以用来将嵌套的对象数组扁平化，使其更方便地进行处理和展示。

    3 年前
  • npm 包 @hypercubed/replit 使用教程

    什么是 @hypercubed/replit？ @hypercubed/replit 是一个 npm 包，其用途是在 Replit 开发环境中创建并管理前端项目。它是由 Hypercubed 团队开发...

    3 年前
  • npm包boot.min.js使用教程

    前言 随着前端技术的不断发展，我们在项目开发中经常会使用到各种工具和框架。其中，npm是一个非常重要的工具，它可以方便地管理我们所需要的各种包。在本篇文章中，我将介绍一个非常实用的npm包——boot...

    3 年前
  • npm包 @indigoframework/cs-validator 使用教程

    前言 随着现代化的网页设计越来越复杂，前端开发的工作也变得越来越繁琐。为了方便开发者快速创建页面，前端框架越来越普及。然而，由于众多组件之间的嵌套和组合，表单验证则变得愈发困难。

    3 年前
  • npm 包 @indigoframework/client 使用教程

    前言 前端技术繁荣发展，现在已经有很多可以用来帮助我们提高效率和开发速度的插件和库。其中， npm 是一个非常受欢迎的包管理器，它为我们提供了丰富的第三方包来解决我们的问题。

    3 年前
  • npm 包 @indigoframework/react-mapexplorer 使用教程

    前言 地图可视化在 Web 开发中是非常常见的需求，而当前流行的前端框架 React 很好的支持了这方面的开发。本文将介绍一个基于 React 的地图组件库 @indigoframework/reac...

    3 年前
  • npm 包 @indigoframework/mapexplorer-core 使用教程

    1. 简介 @indigoframework/mapexplorer-core 是一个基于 OpenLayers 的 JavaScript 库，可以快速地创建一个地图浏览器应用。

    3 年前
  • npm 包 @indream/skygear 使用教程

    介绍 Skygear 是一个开源的云服务平台，它提供了一系列的服务，包括身份认证、数据存储、推送通知、实时聊天等。@indream/skygear 是基于 Skygear 封装的一款 npm 包，它使...

    3 年前
  • npm 包 @indigoframework/tmpop-explorer 使用教程

    介绍 本文介绍了一个 npm 包，即 @indigoframework/tmpop-explorer，它是一个面向前端开发者的工具，可用于快速生成基于时间线的页面，界面美观且易用。

    3 年前
  • npm 包 @indigoframework/utils 使用教程

    简介 @indigoframework/utils 是由 Indigo Framework 团队开发的一款前端常用工具函数库。它实现了一系列常用的工具函数，帮助前端开发者更快、更便捷地开发。

    3 年前
  • npm 包 @indigotrace/sdk 使用教程

    前言 前端开发人员不可避免地需要使用各种第三方库和工具来提高我们的开发效率。其中，npm 是一个非常常用的包管理器，通过 npm 我们可以很方便地下载和安装各种库和工具。

    3 年前
  • npm 包 @ineentho/react-rangeslider 使用教程

    介绍 在前端开发中，使用拖动滑块来选择某个值的需求非常常见。@ineentho/react-rangeslider 是一个使用 React 实现的滑块组件库，提供了强大而易于使用的滑块功能。

    3 年前

相关推荐

    暂无文章