PHPackages                             schnti/photoswipe - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. schnti/photoswipe

ActiveKirby-plugin[Utility & Helpers](/categories/utility)

schnti/photoswipe
=================

A plugin for Kirby CMS to intecrate photoswipe

1.1.1(1y ago)5554[1 issues](https://github.com/schnti/kirby-photoswipe/issues)1MITPHP

Since Mar 24Pushed 1y ago2 watchersCompare

[ Source](https://github.com/schnti/kirby-photoswipe)[ Packagist](https://packagist.org/packages/schnti/photoswipe)[ Docs](https://github.com/schnti/kirby-photoswipe)[ RSS](/packages/schnti-photoswipe/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (4)Dependencies (1)Versions (5)Used By (1)

PhotoSwipe plugin
=================

[](#photoswipe-plugin)

A plugin for [Kirby CMS](http://getkirby.com) that adds [photoswipe](http://photoswipe.com/) v5.

As of PhotoSwipe version v5, the integration of PhotoSwipe has become much easier. The Kirby plugin is only needed if the PhotoSwipe tag is required. Otherwise it is recommended to integrate PhotoSwipe without this plugin:

Commercial Usage
----------------

[](#commercial-usage)

This plugin is free but if you use it in a commercial project please consider

- [making a donation](https://www.paypal.me/schnti/5) or
- [buying a Kirby license using this affiliate link](https://a.paddle.com/v2/click/1129/48194?link=1170)

Installation
------------

[](#installation)

### Download

[](#download)

[Download the files](https://github.com/schnti/kirby-photoswipe/archive/master.zip) and place them inside `site/plugins/photoswipe`.

### Git Submodule

[](#git-submodule)

You can add the plugin as a Git submodule.

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

```

Run these commands to update the 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)

```
composer require schnti/photoswipe

```

### Install PhotoSwipe

[](#install-photoswipe)

```
npm install --save photoswipe

```

#### JS

[](#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

[](#cssscss)

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

```

### Add static gallery

[](#add-static-gallery)

```

        Image caption

```

### or add dynamic gallery with kirby markup (and [Bootstrap 5](https://getbootstrap.com/docs) Grid)

[](#or-add-dynamic-gallery-with-kirby-markup-and-bootstrap-5-grid)

```