README

为 Kirby 3 CMS 添加 photoswipe v5 的插件。

截至 PhotoSwipe 版本 v5，PhotoSwipe 的集成变得更加简单。如果需要 PhotoSwipe 标签，则需要此 Kirby 插件。否则，建议在不使用此插件的情况下集成 PhotoSwipe：[https://photoswipe.com/v5/docs/getting-started/](https://photoswipe.com/v5/docs/getting-started/)

商业使用

此插件免费，但如果您将其用于商业项目，请考虑以下选项

安装

下载

下载文件并将它们放入 site/plugins/photoswipe。

Git 子模块

您可以将插件作为 Git 子模块添加。

$ cd your/project/root
$ git submodule add https://github.com/schnti/kirby3-photoswipe.git site/plugins/photoswipe
$ git submodule update --init --recursive
$ git commit -am "Add Kirby PhotoSwipe plugin"

运行以下命令以更新插件

$ cd your/project/root
$ git submodule foreach git checkout master
$ git submodule foreach git pull
$ git commit -am "Update submodules"
$ git submodule update --init --recursive

Composer

composer require schnti/photoswipe

安装 PhotoSwipe

npm install --save photoswipe

JS

import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
import PhotoSwipe from 'photoswipe/dist/photoswipe.esm.js';

// don't forget to include CSS in some way
// import 'photoswipe/dist/photoswipe.css';

const lightbox = new PhotoSwipeLightbox({
  gallery: '.photoswipe',
  children: 'a',
  pswpModule: PhotoSwipe
});
lightbox.init();

CSS/SCSS

@import "~photoswipe/src/photoswipe.css";

添加静态相册

<div class="photoswipe">
    <figure>
        <a href="large-image.jpg" data-pswp-width="800" data-pswp-height="600" target="_blank">
            <img src="small-image.jpg" alt="Image description" />
        </a>
        <figcaption>Image caption</figcaption>
    </figure>
</div>

或使用 Kirby 标记添加动态相册（以及 Bootstrap 5 网格）

<div class="row photoswipe">
    <?php foreach ($page->images() as $image): ?>

        <?php $pic = $image->resize(2000, null, 90); ?>

        <figure class="col-4">
            <a href="<?= $pic->url(); ?>"
               data-pswp-width="<?= $pic->width(); ?>"
               data-pswp-height="<?= $pic->height(); ?>"
               target="_blank">
                <img class="img-fluid" src="<?= $image->crop(600, 380, 80)->url(); ?>" alt="<?= $image->alt()->kirbytextinline() ?>"/>
            </a>

            <figcaption><?= $image->alt()->kirbytextinline() ?></figcaption>
        </figure>

    <?php endforeach; ?>
</div>

或使用 photoswipe kirbytag

(photoswipe: image.jpg
    width: 200
    height: 200
    quality: 70
    crop: true
)

标签属性

小预览缩略图

width: 整数（缩略图调整宽度，默认：500）
height: 整数（缩略图调整高度，默认：null）
quality: 整数（jpeg 质量从 0 到 100，默认：80）
crop: 布尔值（根据给定的宽度和高度参数裁剪文件，默认：false）

大灯箱图片

lightboxwidth: 整数（图片调整宽度，默认：1000）
lightboxheight: 整数（图片调整高度，默认：null）
lightboxquality: 整数（jpeg 质量从 0 到 100，默认：90）

选项

您可以在 /site/config/config.php 中更改默认相册 CSS 选择器的宽度

return [
  'schnti.photoswipe.class' => 'photoswipe',
];

schnti / photoswipe

维护者

详细信息