フリックできるスマホ用フォトギャラリー

スマートフォンの画面は、PCのように表示領域が広くはありませんので、スマホでフォトギャラリーのような写真をたくさん並べて見せるには限度があります。そこで、フリック操作で画像を1枚ずつ見ることができるプラグインを紹介したいと思います。

jQueryを用意する

まずは、jQuery本体とFlipsnap.jsというプラグインをそれぞれのサイトからダウンロードしてhead内に読み込ませます。
そして、以下のようなHTMLとCSSソースを作り、フリックさせたい要素を表示させます。幅などは使用する画像サイズに合わせて指定を変更してください。

【HTML】
<div class="gallery">
  <div class="flipsnap">
    <div class="thumb"><img src="img/thumb01.jpg" alt="" /></div>
    <div class="thumb"><img src="img/thumb02.jpg" alt="" /></div>
    <div class="thumb"><img src="img/thumb03.jpg" alt="" /></div>
    ～中略～
    <div class="thumb"><img src="img/thumb10.jpg" alt="" /></div>
  </div>
</div>

【CSS】
.gallery {
  width: 100%;
  -webkit-transform: translatez(0) translate3d(0,0,0);
}
.flipsnap {
  width: 2300px;
  height: 200px;
}
.thumb {
  float: left;
  width: 200px;
  margin: 0 15px;
}
.thumb img {
  width: 100%;
}

フリックさせたい画像を用意したら、最後にhead内にjavascriptを追加して動くようにします。

$(function() {
  Flipsnap('.flipsnap',{
    distance: 230,
    disable3d: true
  });
});

これで、横に画像をフリックさせながら1枚ずつ見ることができるようになります。