手机图片预览插件photoswipe.js使用总结

介绍

Photoswipe是一个JavaScript库，用于提供可缩放的图像轮廓，并适用于所有现代桌面和移动浏览器，具有触摸屏支持和响应式图像大小。它通过全局的脚本文件或模块的方式来使用。它可以很容易地与jQuery、React、Angular、Vue等框架集成。

安装

Photoswipe是一个基于jQuery的插件，在使用之前您需要先引入jQuery。可以通过以下方式引入：

<script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>

同时，需要引入Photoswipe库文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>

使用

基本步骤

以下是在网站上使用Photoswipe进行图片预览的基本步骤：

创建HTML结构

Photoswipe需要一个合适的HTML结构。需要一个列表来显示所有要预览的图像。所以你需要以下的HTML结构：

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="path/to/full/image.jpg" data-size="widthxheight">
            <img src="path/to/thumbnail/image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption 1</figcaption>
    </figure>

    ...
    ...
    ...

</div>

初始化Gallery

$('.my-gallery').each(function() { 
    var $pic     = $(this),
        getItems = function() {
            var items = [];
            $pic.find('figure').each(function() {
                var $href   = $(this).find('a').attr('href'),
                    $size   = $(this).find('a').data('size').split('x'),
                    $width  = $size[0],
                    $height = $size[1];

                var item = {
                    src : $href,
                    w   : $width,
                    h   : $height
                }

                items.push(item);
            });
            return items;
        }

    var items = getItems();

    var $pswp = $('.pswp')[0];
    $pic.on('click', 'figure', function(event) {
        event.preventDefault();

        var index = $(this).index();
        var options = {
            index: index,
            bgOpacity: 0.7,
            showHideOpacity: true
        }

        var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
        gallery.init();
    });
});

这样就制作出来了一个基本的图像展示器。这其中 .pswp 是photoswipe默认的UI布局，一般来说你不需要改变它.

示例说明

假设我们有一组图片需要进行展示，我们按照如下结构来展示：

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="https://source.unsplash.com/8Eg5jD1ksUI/1600x900" data-size="1600x900">
            <img src="https://source.unsplash.com/8Eg5jD1ksUI/400x400" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption 1</figcaption>
    </figure>
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="https://source.unsplash.com/1IM6Zu05_4g/1600x900" data-size="1600x900">
            <img src="https://source.unsplash.com/1IM6Zu05_4g/400x400" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption 2</figcaption>
    </figure>
</div>

这里我们创建了一个 div.my-gallery 的元素，其中我们定义了两个 figure 元素，每个 figure 元素包含一个 a 元素创建一张图片预览，同时增加了一个 data-size 属性，用来指定图片的实际大小。

然后按照上面初始化Gallery的方式进行调用：

$('.my-gallery').each(function() { 
    var $pic     = $(this),
        getItems = function() {
            var items = [];
            $pic.find('figure').each(function() {
                var $href   = $(this).find('a').attr('href'),
                    $size   = $(this).find('a').data('size').split('x'),
                    $width  = $size[0],
                    $height = $size[1];

                var item = {
                    src : $href,
                    w   : $width,
                    h   : $height
                }

                items.push(item);
            });
            return items;
        }

    var items = getItems();

    var $pswp = $('.pswp')[0];
    $pic.on('click', 'figure', function(event) {
        event.preventDefault();

        var index = $(this).index();
        var options = {
            index: index,
            bgOpacity: 0.7,
            showHideOpacity: true
        }

        var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
        gallery.init();
    });
});

这段JavaScript代码中，我们首先获取到每一个 .my-gallery 元素，通过 getItems 函数来获取图片的信息（src, w, h），通过 index 变量记录当前的index，通过定义 options 变量来初始化一个新的照片展示器gallery并开始展示。