【Swipebox】PC&SP両方につかえるライトボックス

画像を大きく表示してしまうとバランスが悪くなるので小さく表示したが画像が見づらい！

画像をクリックしたら大きく表示したい！

上記の場合にライトボックスなどのjQueryプラグインを使うことも多いと思います。

ですがjQueryプラグインがたくさんありすぎてどれを使えばいいのか分からないといった意見もよく聞きます。

そこで今回はPCにもスマホにも対応している「Swipebox」がおすすめなので紹介していきたいと思います。

Swipeboxのダウンロード

Swipeboxに必要なファイルは下記の公式サイトから一式ダウンロードすることができます。

ファイルをダウンロードしたら必要なファイルを読み込みます。

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

jQueryは下記になります。

$(function() {
    $('.swipebox').swipebox();
});

ライトボックスで画像を大きくさせたい部分htmlは下記になります。

<a href="https://placehold.jp/700x700.png" class="swipebox" rel="group" title="Title">
	<img src="https://placehold.jp/700x700.png" alt="">
</a>

Swipeboxは軽量で使いやすいプラグインだと思います。

またPCにもSPにも両方対応している点も良いですね。