PhotoSwipeで左右のページ遷移を反転させたい

PhotoSwipe で，左右のページ遷移を反転させたいと思っています．
そこで次のように，itemsを逆順にして実行したのですが，当然ながら表示されるindexカウンタの値も逆になってしまいます．
そちらを調整したいのですがphotoswipe.jsに手を加えない範囲でカスタマイズするにはどのような実装が考えられるでしょうか．
またはitemsの反転をせずに直接nextとprevと左右の順番を入れ替える方法があれば教えていただきたいです．

js
1const pswpView = e => {
2    let pswpElement = document.querySelector('div.pswp');
3    let items = [...document.querySelectorAll('.iv-li img')].map(img => {
4      return {src: img.src,
5          w: img.naturalWidth,
6          h: img.naturalHeight
7        };
8    });
9    let index = parseInt(e.target.getAttribute('data-index'));
10
11    if (document.querySelector('.iv-rev').checked) {
12      items = items.reverse();
13      index = items.length - 1 - index;
14    }
15
16    const options = {index: index};
17    const pswp = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
18    pswp.init();
19};
20
21[...document.querySelectorAll('.iv-li img')].forEach(img=>{
22  img.addEventListener('click', pswpView, false);
23});

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.min.css" type="text/css">
6  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/default-skin/default-skin.min.css"
7    type="text/css">
8  <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.min.js"></script>
9  <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe-ui-default.min.js"></script>
10</head>
11
12<body>
13  <div class="pswp" aria-hidden="true" role="dialog" tabindex="-1">
14    <div class="pswp__bg"></div>
15    <div class="pswp__scroll-wrap">
16      <div class="pswp__container">
17        <div class="pswp__item"></div>
18        <div class="pswp__item"></div>
19        <div class="pswp__item"></div>
20      </div>
21      <div class="pswp__ui pswp__ui--hidden">
22        <div class="pswp__top-bar">
23          <div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
24          <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs"
25            title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
26          <div class="pswp__preloader">
27            <div class="pswp__preloader__icn">
28              <div class="pswp__preloader__cut">
29                <div class="pswp__preloader__donut"></div>
30              </div>
31            </div>
32          </div>
33        </div>
34        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
35          <div class="pswp__share-tooltip"></div>
36        </div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button> <button
37          class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
38        <div class="pswp__caption">
39          <div class="pswp__caption__center"></div>
40        </div>
41      </div>
42    </div>
43  </div>
44
45  <input type="checkbox" class="iv-rev">
46  <ul>
47    <li class="iv-li">
48      <img src="img/0.png" data-index="0">
49    </li>
50    <li class="iv-li">
51      <img src="img/1.png" data-index="1">
52    </li>
53    <li class="iv-li">
54      <img src="img/2.png" data-index="2">
55    </li>
56    <li class="iv-li">
57      <img src="img/3.png" data-index="3">
58    </li>
59    <li class="iv-li">
60      <img src="img/4.png" data-index="4">
61    </li>
62  </ul>
63</body>
64
65<script src="sample.js"></script>
66
67</html>

NozomuIkuta

2019/01/03 14:03

仕様を確認したいのですが、公式サイトの一番上の例で言うと、 (1)左の大きい画像を開く (2)右矢印を押す (3)クマが表示されるようになればいいということですか？

kairi003

2019/01/03 14:26

はい。動きはそれです。ただやりたいことは具体的にはマンガを表示したいので、 (1)左の大きい画像を開く (2)左矢印を押す or 左スワイプ or 左キー (3)2番目の湖的なのが表示されるとしたいです。見かけ上の動き自体は上記の読み込ませる順番を逆順にすることで可能なのですが、左上のindex counter（ページ番号）も逆になっちゃうのでページ番号表示部分の関数をカスタマイズできないかなと思ってます。

行動規範の内容に同意します

回答2件

ベストアンサー

左右の矢印をクリックした時に進む方向を、左右逆にしたいとのことなので、pswp__button--arrow--leftとpswp__button--arrow--rightのスタイルをいじって、左右の矢印のスタイルを逆にしてしまうのが一番てっとり早いと思います。

PhotoSwipeはよくできた(精密な)プラグインなので、ロジックでどうにかしようとすると意図しないバグが発生する可能性があるので、今回の場合はやらない方がいいと思います。

もしサイト内で他にPhotoSwipeを使っているのであれば、該当のマンガのときだけでスタイルがあたるように調整してみてください。

追記

結論としては、現状、PhotoSwipeには、左右反転オプションはないようで、若干のカスタマイズが必要なようです。（作者の方が「時間があったらやるよ」といったことをおしゃっています。）

現状はkairi003さんのおっしゃる通り「配列をreverse()」したあとに、作者の方が紹介している方法のようにPhotoSwipeのインデックス表示関数を上書きすればできるようです。

投稿2019/01/03 14:47

編集2019/01/03 15:11

NozomuIkuta

総合スコア1260

NozomuIkuta

2019/01/03 14:55 編集

すみません、一旦番号がどうなるか試してもらえると幸いです。

kairi003

2019/01/03 14:53

すみません、説明不足でした。左右の矢印だけでなくフリックやキー入力のページ遷移も逆にしたいです。特にフリック時はページ送りのような動作なので、できればこちらが自然に動くようにしたいです。

NozomuIkuta

2019/01/03 14:55

了解です。できるかわかりませんが、少々お待ちを。

kairi003

2019/01/03 15:20

ありがとうございました。助かりました。

NozomuIkuta

2019/01/03 16:18

参考になったのであれば幸いです。

行動規範の内容に同意します

こんな風になりました。
optionの指定でinit時に各種調整を行う感じです。

JS
1// 略
2
3// ギャラリーオブジェクトpswpの作成
4// options: reverse=true;
5const pswp = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
6
7// firstUpdateイベント
8pswp.listen('firstUpdate', () => {
9
10    // reverseオプション判定
11	if (pswp.options.reverse) {
12
13       // itmesを反転
14		pswp.items.reverse();
15
16       // indexの初期位置を変更
17		pswp.options.index = items.length - 1 - (pswp.options.index | 0);
18
19       // ページ番号表示関数の変更
20		let indexIndicator = pswp.template.getElementsByClassName('pswp__counter')[0]
21		pswp.ui.updateIndexIndicator = () => {
22			if (pswp.options.counterEl) {
23				indexIndicator.innerHTML = (pswp.options.getNumItemsFn() - pswp.getCurrentIndex()) +
24					pswp.options.indexIndicatorSep +
25					pswp.options.getNumItemsFn();
26			}
27		}
28
29        // 左右の矢印のタイトルを入れ替え
30		let arrow_left = pswp.template.getElementsByClassName('pswp__button--arrow--left')[0];
31		let arrow_right = pswp.template.getElementsByClassName('pswp__button--arrow--right')[0];
32		[arrow_left.title, arrow_right.title] = [arrow_right.title, arrow_left.title];
33	}
34});
35
36pswp.init()
37