npm 包 photoswipe-demo 使用教程

Photoswipe 是一个用于 web 端图片浏览的精简、自适应、完全开源的 JS 库。并且它具有轻量级、易于使用、可扩展等特点，适用于移动端和 PC 端浏览器。而在 npm 上有一个对应的 photoswipe-demo 包，方便了前端开发者的使用。在本文中，我们将详细介绍如何使用 photoswipe-demo 包，以及一些常见用法。

安装 photoswipe-demo

在使用 photoswipe-demo 前，需要先安装该 npm 包。在终端或命令行工具中输入以下命令即可：

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

使用 photoswipe-demo

使用 photoswipe-demo 有两种方法，一种是通过 script 标签直接引入 photoswipe.js 和 photoswipe-ui-default.js，然后在 HTML 中使用标准的 photoswipe 结构进行初始化，第二种是通过 npm 包的方式，使用 common.js 或者 es6 module 来进行引用。

第一种方法

引入文件

首先，需要在 HTML 中引入 photoswipe.js 和 photoswipe-ui-default.js 这两个文件：

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

初始化结构

然后，通过 HTML 将需要展示的图片包括在 photoswipe 等容器中：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        ------

    ------

------

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

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

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

------

初始化 photoswipe

接下来在 script 中进行以下初始化设置：

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

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

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

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

第二种方法

在按照第一种方式引入时，容易出现一些问题，特别是在引入多个模块的情况下，常常会出现命名冲突等问题。所以我们推荐使用第二种方式进行调用。现在很多前端工程化的构建工具都已经支持 es6 module 和 common.js 的方式，所以安装 photoswipe-demo 包后，就能直接引入。

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

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

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

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

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

API 文档

正如上文中提到的，photoswipe-demo 具有完全的 api 接口，不同的参数可以完成不同的功能。接下来，我们列举一些比较常用的 api：

  • bgOpacity 设置背景透明度（默认是 0.8）。

  • closeOnVerticalDrag 垂直滑动是否可以关闭（默认是 true）。

  • closeOnScroll 页面滚动是否可以关闭（默认是 true）。

  • history 是否启用历史记录管理器（默认是 true）。

  • pinchToClose 缩放时是否可以关闭（默认是 true）。

  • captionEl 是否显示图片描述（默认是 true）。

  • fullScreenEl 是否开启全屏模式（默认是 true）。

  • tapToClose 是否可以通过点击屏幕来关闭（默认是 false）。

  • clickToCloseNonZoomable 是否只对缩放后的图片可以关闭（默认是 false）。

  • showAnimationDuration 打开图片的动画持续时间（默认是 333ms）。

  • hideAnimationDuration 关闭图片的动画持续时间（默认是 333ms）。

小结

在本文中，我们讲解了如何使用 npm 包 photoswipe-demo 进行前端开发中的图片浏览。我们介绍了两种使用 photoswipe-demo 的方式，分别是通过 script 标签和 npm 包。同时，我们也列举了一些 photoswipe-demo 的 api 接口。希望本文对于前端开发者有所帮助。

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

阅读全文

猜你喜欢

  • npm 包 jquery.panzoom.nopreventdefault 使用教程

    在前端开发中，交互是一个非常重要的环节。而 jQuery 是一个非常优秀的 JavaScript 库，可以帮助我们完成各种交互效果。其中，jQuery.panzoom.nopreventdefault...

    2 年前
  • npm 包 stibble-api-client-angular 使用教程

    在前端开发中，我们经常用到后端提供的 API 进行数据交互和展示。而 stibble-api-client-angular 是一个基于 Angular 的 npm 包，用于方便地调用后端接口。

    2 年前
  • npm 包 alfred-sound-output 使用教程

    在日常的前端开发中，我们难免会遇到需要使用声音播放的场景，比如音乐播放器、提示音等。针对这些需求，我们可以使用一些第三方的库和工具来简化我们的开发工作。其中，一款非常实用的工具就是 alfred-so...

    2 年前
  • npm 包 watch-me-load 使用教程

    随着现代前端应用的复杂性不断增加，为了优化用户体验，很多应用都采用了异步加载资源的方式。然而，在开发过程中，我们往往需要频繁地修改代码和资源文件，这使得我们需要不断地刷新页面才能看到最新的效果。

    2 年前
  • npm 包 fetch-remote-dir 使用教程

    随着前端技术的不断发展，我们需要频繁地获取远程服务器上的文件，从而进行后续的处理工作。而在这个过程中，使用 npm 包 fetch-remote-dir 就可以轻松实现对服务器上指定路径下的所有文件的...

    2 年前
  • npm 包 library-alan 使用教程

    概述 在前端开发中，使用一些常用的工具和库能够大大提高我们的开发效率。其中，npm 是一个值得注意的工具，它是全球最大的软件包管理系统，能够用来安装、分享和发布 Node.js 应用程序的代码。

    2 年前
  • npm 包 node-mapred 使用教程

    简介 node-mapred 是一个基于 Node.js 平台的 MapReduce 框架，用于处理分布式数据。它是通过 Node.js 的进程和线程来实现分布式计算的，可以快速地完成大规模数据处理，...

    2 年前
  • npm 包 node-watchtower 使用教程

    node-watchtower 是一个用于监视文件变化并执行自定义操作的 npm 包。在前端开发中，我们经常需要对文件进行频繁的修改和打包等操作，使用 node-watchtower 可以方便我们自动...

    2 年前
  • npm 包 normalize-data 使用教程

    在前端开发中，我们经常需要对数据进行格式化以便更好地展现和使用。而在数据不规范的情况下，我们可能需要手动处理数据，这不仅浪费时间，也容易出现错误。normalize-data 就是一款帮助前端开发者解...

    2 年前
  • npm 包 pown-wifi-current 使用教程

    介绍 pown-wifi-current 是一个用于获取当前 Wi-Fi 连接信息的 npm 包。它能够获取当前连接的 Wi-Fi 名称、信号质量、信道、MAC 地址等各种信息，方便我们快速地进行相关...

    2 年前
  • npm 包 plus.garden.webdriver 使用教程

    前言 在前端开发中，一个比较重要的组成部分就是自动化测试。自动化测试可以帮助开发者减少代码错误、提升代码质量以及提高开发效率。 其中，WebDriver 是一个非常重要的自动化测试工具，可以用来自动化...

    2 年前
  • npm 包 yandex-money-sdk-ext 使用教程

    本文将为大家介绍 npm 包 yandex-money-sdk-ext 的使用方法，该包主要用于与 Yandex 金融平台进行交互。本文分为以下几个部分：介绍 yandex-money-sdk-ext...

    2 年前
  • npm 包 json-recursive 使用教程

    json-recursive 是一个用于递归遍历和修改 JSON 对象的 npm 包。它可以在前端项目中方便地处理 JSON 数据，并提供了一些功能强大的辅助方法。

    2 年前
  • npm包pluc使用教程

    1. 什么是pluc pluc是一款基于webpack4开发的前端自动化构建工具，能够大幅度提升开发效率和运行速度。pluc通过实现智能化的打包机制，能够缩短页面的加载时间，从而优化用户体验。

    2 年前
  • npm 包 zero-translate 使用教程

    在前端开发中，我们经常需要处理多语言翻译，在这个过程中，一个好的翻译工具可以帮助我们增加开发效率和提高用户体验。npm 包 zero-translate 是其中一个很好的选择，它提供了一组简单易用的 ...

    2 年前
  • npm 包 recreate 使用教程

    在前端开发中，我们经常需要在代码中创建对象、数组等数据集合。然而，有些时候我们需要对这些数据集合进行修改，并且希望原本的数据集合不受影响。这时候，我们可以考虑使用 npm 包 recreate，它可以...

    2 年前
  • npm 包 react-github-nav 使用教程

    前言 在现代 Web 开发中，使用一些优秀的前端框架和库是必须的。而 npm 包管理器的出现，让我们更加方便地引用和管理这些库，提高了开发效率。 今天，我们要介绍的是一个名为 react-github...

    2 年前
  • npm包 "angular2-viewport" 使用教程

    简介 "angular2-viewport" 是一个 Angular2 响应式设计插件，它能让你在你的 Angular2 应用中生成不同的 HTML 片段来适应不同的 viewport。

    2 年前
  • npm 包 hexo-tag-snack 使用教程

    hexo-tag-snack是一款npm包，它是一款Hexo插件，可以将你的网站内容与snack.expo.io集成，方便你在博客中嵌入你的React Native应用程序。

    2 年前
  • npm 包 react-iban 使用教程

    什么是 react-iban react-iban是一个npm包，它提供了一个React组件，用于显示和输入银行账号的IBAN号码。IBAN (International Bank Account N...

    2 年前

相关推荐

    暂无文章