【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

jQueryは下記になります。

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

html

ライトボックスで画像を大きくさせたい部分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にも両方対応している点も良いですね。

コメント

タイトルとURLをコピーしました