jQuery 画像の拡大・スワイプ スマホ対応プラグイン Swipebox

まずは Swipebox をダウンロードしましょう。

こちらのページから一番下にある Download ボタンでダウンロードできます。

・Swipebox A touchable jQuery lightbox

ここでは Swipebox v1.3.0.2 をダウンロードしています。

ダウンロードした swipebox-master.zip を解凍すると、下図のようなディレクトリ構成となっています。この中の src だけを利用しますので、コピーしてサイトに設置します。

cssでimgフォルダ内のアイコンを読み込む記述があるので配置場所にはご注意を。

以下のソースを記述して style.css と swipebox.js と jquery を読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="./swipebox/js/jquery.swipebox.min.js"></script>
<link rel="stylesheet" type="text/css" href="./swipebox/css/swipebox.css" />
<script type="text/javascript">
  $(function() {
      $('.swipebox').swipebox();
  });
</script>

表示したい画像を記述します。

以下の記述は、サムネイルをクリックするとオリジナル画像を表示するサンプルです。

上述の jQuery で指定したとおり <a> タグの class に swipebox と指定します。

<a href="./images/image.jpg" class="swipebox" title="Swipebox デモ">
  <img src="./images/image.jpg" alt="Swipebox　デモ" height="300" width="300">
</a>

ギャラリー画像を表示してスワイプすることもできます。

<a> タグの rel に指定した名前でギャラリーを表示します。

rel に指定した名前が同じ画像についてスワイプできます。

<!-- Gallery 1 -->
<a rel="gallery-1" href="images/image1.jpg" class="swipebox" title="Swipebox　スワイプデモ１">
  <img src="./images/image1.jpg" alt="Swipebox　スワイプデモ１" height="300" width="300">
</a>
<a rel="gallery-1" href="images/image2.jpg" class="swipebox" title="Swipebox　スワイプデモ２">
  <img src="./images/image2.jpg" alt="Swipebox　スワイプデモ２" height="300" width="300">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="images/image3.jpg" class="swipebox" title="Swipebox　スワイプデモ３">
  <img src="./images/image3.jpg" alt="Swipebox　スワイプデモ３" height="300" width="300">
</a>
<a rel="gallery-2" href="images/image4.jpg" class="swipebox" title="Swipebox　スワイプデモ４">
  <img src="./images/image4.jpg" alt="Swipebox　スワイプデモ４" height="300" width="300">
</a>

こちらに Swipeboxを使ったデモページ を用意しました。

テーマは仕事部屋のアイテム達です＾＾

・Swipeboxを使ったデモページ

Swipebox は軽量で簡単に導入でき、スマホ対応もされているので今の時代にマッチしたプラグインといえます。個人的な見解ですが、割と扱いやすいので好きですね。

実際に私のクライアントで、このプラグインを導入して制作したホームページもあります。

皆さんも試してみてください。