实用插件（二）图片全屏预览插件——PhotoSwipe

最新推荐文章于 2024-05-31 20:25:13 发布

置顶 front_end_fan

最新推荐文章于 2024-05-31 20:25:13 发布

阅读量2.2k

点赞数

分类专栏：插件文章标签：插件图片

本文链接：https://blog.csdn.net/qq_39198420/article/details/76684673

版权

插件专栏收录该内容

13 篇文章 1 订阅

订阅专栏

注：该插件app项目，pc项目都可使用

1、下载：先下载插件压缩包免费下载

2、使用：

步骤：1、html结构：
        <ul id="gallery"  class="upload-pics gallery">
               <li><a href="../../images/p1.png"> <img src="../../images/p1.png" /></a></li>
               <li><a href="../../images/p1.png"> <img src="../../images/p2.png" /></a></li>
        </ul>

     2、引入2个css， 5个js文件

     3、调用插件 
     // 调用插件
    $(function () {
        var
                options = {},
                instance = window.Code.PhotoSwipe.attach( window.document.querySelectorAll('#g     a'), options );

    })

3、下面是demo

        <!DOCTYPE html>
        <html>
        <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="../../css/bootstrap.css"/>
        <!-- 2个css文件-->
        <link href="../../css/styles.css" type="text/css" rel="stylesheet" />
        <link href="../../css/photoswipe.css" type="text/css" rel="stylesheet" />
        <title>high-school</title>

        <script src="../../js/jquery-1.11.3.js"></script>
        <!-- 5个js文件-->
        <script type="text/javascript" src="../../js/klass.min.js"></script>
            <script type="text/javascript" charset="utf-8" src="../../js/code.photoswipe-3.0.5.js"></script>
            <script type="text/javascript" charset="utf-8" src="../../js/jquery.transit.js"></script>
            <script type="text/javascript" charset="utf-8" src="../../js/hammer.js"></script>
            <script type="text/javascript" charset="utf-8" src="../../js/jquery.hammer.js"></script>
            <script type="text/javascript">
                // 调用插件
                $(function () {
                    var
                            options = {},
                            instance = window.Code.PhotoSwipe.attach( window.document.querySelectorAll('#g a'), options );

                })


            </script>
        </head>
        <body>
         <ul id="gallery"  class="upload-pics gallery">
                       <li><a href="../../images/p1.png"> <img src="../../images/p1.png" /></a></li>
                       <li><a href="../../images/p1.png"> <img src="../../images/p2.png" /></a></li>
                    </ul>
        </body>
        </html>

4、效果图

这里写图片描述

             注：下面的按钮图标为非正常显示，功能是正常的，可以滑动切换图片，正常返回

front_end_fan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实用插件（二）图片全屏预览插件——PhotoSwipe

注：该插件app项目，pc项目都可使用1、下载：先下载插件压缩包免费下载2、使用：步骤：1、html结构： <ul id="gallery" class="upload-pics gallery"> <li><a href="../../images/p1.png"> <img src="../../images/p1.png" /></a></li
复制链接

扫一扫