使用PhotoSwipe-master实现相册功能

最新推荐文章于 2020-05-11 16:17:38 发布

幸福棒棒糖__fxx

最新推荐文章于 2020-05-11 16:17:38 发布

阅读量617

点赞数 1

文章标签： PhotoSwipe-master 图片预览相册

本文链接：https://blog.csdn.net/qq_33157666/article/details/78632315

版权

本文详细介绍了如何利用PhotoSwipe-master实现相册功能，包括从官方网站获取相关CSS和JS文件，以及如何实现相册展示效果。

摘要由CSDN通过智能技术生成

目的：本文主要介绍如何使用photoSwipe-master实现相册功能

1、引入相关css和js

这些文件可以上PhotoSwipe-master的官网下载：http://photoswipe.com/

<link rel="stylesheet prefetch" href="../PhotoSwipe-master/dist/photoswipe.css">
<link rel="stylesheet prefetch" href="../PhotoSwipe-master/dist/default-skin/default-skin.css">

<script src="../PhotoSwipe-master/dist/photoswipe.min.js"></script>
<script src="../PhotoSwipe-master/dist/photoswipe-ui-default.min.js"></script>

2、在自己的html中添加一下代码

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element, as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
        <div class="pswp__container">
            <!-- don't modify these 3 pswp__item elements, data is added later on -->
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div clas