スマホサイトに最適なスワイプに対応したライトボックス「swipebox.js」

  2017年12月12日

案件でスマホでも使いやすい画像を拡大表示してくれるライトボックスを探していたところ
辿り着いたのが「swipe.js」。
ちなみに画像以外にも、YoutubeもOKみたいです。

これ、スマホで見たときに使いやすいので今後使う機会が増えそうです。
使い方やカスタマイズ方法を忘れないうちにメモ。

Demo

スワイプをデモで見たいかたは、ぜひスマホでも見てみてください(^_^)

Swipebox.|公式デモページ

私も今回カスタマイズした内容も含め、デモページを作成してみました。
Swipebox デモページ

使い方

まずは「swipebox.js」をダウンロード。

Swipebox.

ダウンロードした、srcフォルダの中にある以下を使います。

  • jquery.swipebox.min.js
  • swipebox.css
  • imgフォルダ

外部ファイル

swipebox.cssと
jQuery本体、jquery.swipebox.min.jsを
head内に読み込みます。

<link rel="stylesheet" href="./css/swipebox.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.swipebox.min.js"></script>

JavaScript

<script type="text/javascript">
$(document).ready(function() {
    $( '.swipebox' ).swipebox( {
    });
});
</script>

HTML

上記でつけたclass名をaタグに付与します。
relを同じにすることによってグループ化され、スワイプができるようになります。
aタグのtitleに入れたテキストがタイトルとして表示されます。

<ul>
    <li>
        <a href="./img/photo01.jpg" class="swipebox" rel="group" title="Title">
            <img src="./img/photo01_thumb.jpg" alt="">
        </a>
    </li>
    <li>
        <a href="./img/photo02.jpg" class="swipebox" rel="group" title="Title">
            <img src="./img/photo02_thumb.jpg" alt="">
        </a>
    </li>
    <li>
        <a href="./img/photo03.jpg" class="swipebox" rel="group" title="Title">
            <img src="./img/photo03_thumb.jpg" alt="">
        </a>
    </li>
</ul>

カスタマイズ編

現在のswipeboxをそのまま使うと
スマホで見たときに、「次へ」「前へ」の矢印が見えず、
スワイプすることでのみ前後の画像が表示されるようになっています。
同じく、タイトルも見えません…。

古いバージョンだと、スマホで見ても前後への矢印、タイトルの表示がされています。
新しいswipeboxでできないのかな?と検索してみました!
ありました!

※この記事はフロントエンドをちょっと触りたいなと思っているデザイナーさん向けの記事です。 先日、同僚のデザイナ…

上記のサイト様を参考にして作業してみたら、、できました!

JavaScript

<script type="text/javascript">
$(document).ready(function() {
    $( '.swipebox' ).swipebox( {
        'removeBarsOnMobile': false
    });
});
</script>

javascriptの部分に
‘removeBarsOnMobile’: false を追加で解決しました。

ところが…
矢印部分が一定時間経つと、にゅるっと下に隠れてしまいます…
常に表示させておきたかったので、これも今回の案件では不要な動きでした。
ということでcssを修正しました。

#swipebox-bottom-bar.visible-bars の指定を
コメントアウトで解決しました。

swipebox.css

#swipebox-bottom-bar.visible-bars {
  /*-webkit-transform: translate3d(0, -50px, 0);
          transform: translate3d(0, -50px, 0);*/
}

ついでにデモページは画像をクリックしたときのoverlayの色を
rgbaで指定して少し透過に変更しています。
ご参考までに。

#swipebox-overlay {
  background: #0d0d0d;
  background: rgba(0,0,0,.9); //追加
}

最後に

いかがでしょうか。
オプションは少ないみたいですが、シンプルで使い勝手がいいので
今後どんどん使っていきたいなと思いました!

cssを調整すれば、ある程度印象は変えられると思いますし
もとある機能で充分なのかなと思います。

ABOUTこの記事を書いた人

  • mm
  • Editor: うぇぶもようの中の人