辿り着いたのが「swipe.js」。
ちなみに画像以外にも、YoutubeもOKみたいです。
これ、スマホで見たときに使いやすいので今後使う機会が増えそうです。
使い方やカスタマイズ方法を忘れないうちにメモ。
使い方
まずは「swipebox.js」をダウンロード。
ダウンロードした、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でできないのかな?と検索してみました!
ありました!
http://tech.cookbiz.co.jp/engineering-627
上記のサイト様を参考にして作業してみたら、、できました!
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を調整すれば、ある程度印象は変えられると思いますし
もとある機能で充分なのかなと思います。