npm 包 x-photoswipe 使用教程

前言

在现代web开发中，图片展示已经成为一个非常重要的需求，因此寻找一个轻量级且易用的图片展示库变得尤为重要。x-photoswipe 就是这样一个库，它麻雀虽小五脏俱全，支持多种图片展示风格，非常适合前端开发项目中的图片展示需求。

安装及使用

x-photoswipe 是一个npm包，可以使用npm或者yarn将其安装到自己的项目中。

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

在项目中引入 x-photoswipe 的样式文件及 js 文件。

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

在需要展示图片的地方，添加一下 html 代码。

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

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

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

接着，在 js 文件中引入 x-photoswipe，并初始化。

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

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

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

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

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

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

---

如上所述，我们需要定义 items 数组（图片信息数组），其中每一项包含了这个图片的地址、宽度和高度。接着我们监听 my-gallery 元素的 click 事件，当点击的目标元素是 img 标签时，获取这个图片的索引，并传入到 x-photoswipe 的 options 对象中，然后使用 x-photoswipe 的构造函数生成一个 gallery 就完成了。

参数

x-photoswipe 的 options 对象中有很多参数可以自定义，以下是一些常用的参数：

  • index：起始图片的索引值。默认值：0。
  • bgOpacity：背景透明度。默认值：1。
  • history：注意这个设置可能需要在服务器上运行才能正常工作。打开或关闭每个预览页之间的历史浏览记录。默认值：true。
  • closeOnScroll：当滚动时是否关闭预览图。默认值：true。
  • maxSpreadZoom：通过两个手指收缩放大图像时的最大比例。默认仅适用于移动设备。默认值：1。
  • getThumbBoundsFn：确定预览图在底部缩略图列表中的位置、大小和方向。与 history 参数相同，可能需要在服务器上运行。默认值：null。

示例代码

以下是一个简单的示例代码。该示例使用 x-photoswipe 显示多个图像。如果点击图像，则弹出一个预览（可响应触摸）。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

x-photoswipe 是一款非常实用的图片展示库，通过上述教程，我们可以轻松地在自己的项目中使用它，使得我们的图片展示更加完美。同时，通过深入理解 x-photoswipe 的一些参数，我们也能够更好地定制我们需要的图片展示效果。

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

阅读全文

猜你喜欢

  • NPM 包 rest-web-gui 使用教程

    简介 rest-web-gui 是一个基于 Node.js 和 Express 框架的 web 界面，可以用于调试、测试和展示 RESTful API。它提供了轻量级、易于定制和可扩展的界面，使得我们...

    3 年前
  • npm 包 rn-common-styles 使用教程

    如果你是一个 React Native 开发者，那么你一定知道样式表在 React Native 中的重要性。但是，随着项目越来越庞大，每一个页面都要从头编写样式表是比较耗时的。

    3 年前
  • npm 包 @cluejs/gulp-env 使用教程

    介绍 在前端开发中，我们经常需要根据不同的环境进行不同的配置，比如开发环境、测试环境、生产环境等。 而 @cluejs/gulp-env 是一个非常实用的 npm 包，可以在 gulp 中方便地进行不...

    3 年前
  • npm 包 @cluejs/gulp-error-handler 使用教程

    在前端开发中，我们常常需要使用 gulp 任务来完成一些自动化构建工作，其中处理错误信息是一个非常重要的问题，因为如果我们没有良好的错误处理机制，很难对出错的代码进行修复。

    3 年前
  • npm包 ArcticFox使用教程

    前言 ArcticFox是一款前端库，它可以快速便捷地生成动态的数据图表，更加方便的是它可以通过npm安装和管理。本文将为大家详细讲解如何使用ArcticFox。 ArcticFox 文档 首先，我们...

    3 年前
  • npm 包 super-array 使用教程

    前言 在前端开发中，经常需要操作数组。但是，JavaScript 提供的原生数组方法并不总是能满足我们的需求。因此，我们需要使用一些第三方的库。 本文将会介绍一个名为 super-array 的 np...

    3 年前
  • npm 包 @cond/sequelize 使用教程

    前言 在 Web 开发中，数据是非常关键的一环。对于开发者来说，操作数据库是相当常见的任务，因而，在后端开发中，ORM 框架已经被广泛使用。随着 Node.js 的流行，ORM 框架的前端版本也应运而...

    3 年前
  • npm 包 nanofp 使用教程

    前言 在前端开发中，函数式编程越来越受到关注，而 nanofp 就是一款实用的函数式编程工具包。本文将详细介绍 nanofp 的使用方法，帮助读者更好地了解和应用这个包。

    3 年前
  • npm 包 kumaran-test-profile 使用教程

    概述 kumaran-test-profile 是一个基于 Node.js 的 npm 包，可用于构建个人网站、个人简介等。它提供了多种样式、颜色风格等配置选项，让用户可以快速地构建一个个性化的个人网...

    3 年前
  • npm 包 react-native-printer 使用教程

    在前端开发中，打印是一个非常重要的功能。而 react-native-printer 是一个非常方便的 npm 包，它可以让你在 React Native 应用程序中方便地实现打印功能。

    3 年前
  • npm 包 dev-http-server 使用教程

    简介 dev-http-server 是一个基于 Node.js 的 HTTP 服务器，主要用于本地开发和调试。它提供了简单易用的接口和丰富的功能，方便开发者进行静态资源服务器的搭建，同时支持自定义路...

    3 年前
  • npm 包 jishon 使用教程

    什么是 jishon? jishon 是一个 npm 包，它提供了 JavaScript 对象和 JSON 格式之间的相互转换功能。它非常易于使用，可以帮助开发者在前端项目中处理 JSON 数据。

    3 年前
  • npm 包 @lassehaslev/executor 使用教程

    在前端开发中，我们经常需要管理和开发多个项目。随着项目越来越多，经常需要在命令行中运行重复的任务，如编译、打包、测试等。这时候，自动化执行工具就可以发挥巨大作用，节省时间和精力。

    3 年前
  • npm 包 response-giver 使用教程

    在前端开发中，我们常常需要向页面返回数据或者信息。npm 包 response-giver 可以帮助我们更方便地实现这个目标。本文将向大家介绍如何使用 response-giver 包，并提供详细的教...

    3 年前
  • npm 包 @adrianobrito/vaporwave 使用教程

    前言 Vaporwave 是一种以 80 年代城市中心氛围为主题的音乐风格和子文化。而 @adrianobrito/vaporwave 就是一种可以在网页上实现 Vaporwave 风格的 npm 包...

    3 年前
  • npm 包 make-case 使用教程

    什么是 make-case make-case 是一个在命令行上使用的 npm 包，用于将输入的字符串转换为不同的命名风格。make-case 支持的命名风格包括：驼峰、蛇形、短横线和常量大写。

    3 年前
  • npm 包 babel-plugin-transform-import 使用教程

    在前端开发中，我们经常需要引入外部库或框架来完成项目。然而，不同的库和框架使用的语法可能不同，甚至可能存在冲突。因此，我们需要一种工具来解决这个问题。那么，babel-plugin-transform...

    3 年前
  • npm 包 react-pro-booking-calendar 使用教程

    前言 在现代 web 应用的开发过程中，前端界面扮演着至关重要的角色。可以说，一个漂亮、功能齐全的前端界面能够很大程度上提高用户的使用体验，从而提升应用的价值。 而在前端界面的开发过程中，涉及到了很多...

    3 年前
  • npm 包 @pauliclark/color-selector 使用教程

    npm 包 @pauliclark/color-selector 是一个可以帮助前端开发者选择颜色的工具包。它包含了简便易用的组件，将颜色选择器整合到您的网站或应用程序中。

    3 年前
  • npm 包 graphql-up 使用教程

    GraphQL 是一种用于 API 构建协议的查询语言，它提供了对 API 数据的强大且灵活的查询方式，同时附带了强大的类型系统，让我们能够以更高的效率和精准度完成开发工作。

    3 年前

相关推荐

    暂无文章