Laravelで PhotoSwipeを手っ取り早く使う方法

地味に導入が面倒なのでまとめてみた。

参考

PhotoSwipeSimplify(PhotoSwipeを簡単に使うための超便利なライブラリ(参考サイトこちら)

導入方法

1. npmでインストール

npm install jquery.photoswipe

2. app.jsで読み込む

resource/js/app.js

require('photoswipe');
window.photoswipeSimplify = require('photoswipe-simplify');

3. img群をdata-pswp要素で囲む

<div data-pswp>
... 画像 ...
</div>

4. 初期化をしてスタート

photoswipeSimplify.init();

ってやれば幸せになるよ。