スマホでも使えるスライドショー「swipebox」の設定覚え書き

2024.06.07

レスポンシブにも対応
画像の名前も表示できる
さらにスマホではスワイプできてとても便利なスライドショー
「swipebox」
今後も使わせてもらうと思いますので設定覚え書き

公式サイトからファイル一式をダウンロード

Swipebox | A touchable jQuery lightbox
brutaldesign.github.com

一番下の「Download」ボタンからファイルをダウンロード

ファイルを取り出しサイト内に設置

「src」フォルダの中のこちらのファイルを使用します
①js/jquery.swipebox.min.js
②css/swiebox.css
③imgフォルダ　フォルダごと

ファイルをリンクさせる

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="js/jquery.swipebox.min.js"></script>	
<link rel="stylesheet" href="css/swipebox.css">

jsファイルの前に、jQuery本体も忘れずに設置

実行用のコードを記述

<script type="text/javascript">
$(document).ready(function() {
    $( '.swipebox' ).swipebox( {
        'removeBarsOnMobile': false
    });
});
</script>

スライドショーにしたい画像への設定

<a href="img/image01.jpg" class="swipebox" rel="group" title=""><img src="img/image01.jpg"></a>
<a href="img/image02.jpg" class="swipebox" rel="group" title=""><img src="img/image02.jpg"></a>
<a href="img/image03.jpg" class="swipebox" rel="group" title=""><img src="img/image03.jpg"></a>

実行用のコードに書かれているクラス名を、すべての画像のリンクに設定
relタグで同じ名前を設定すると続けて表示されるので必須
titleタグに入れた文字はスライドショー内で表示されます

とてもシンプルで使いやすくありがたいプラグインです！
先程の公式サイトには設置の方法やオプション設定など詳しくわかりやすく記述してくださってます(￣▽￣)

さらに、自分の中ではこれ↓が重要なのでメモ

画像タイトルと左右矢印をずっと表示させるには

というのは　そのままの設定だと、

・画面上の画像タイトル
・画面下の「次の画像」「前の画像」に移動するための矢印

が、一定時間経つとすっと画面外に消えるようになってます
画像がよく見えるのですが、実際使うときはタイトルも矢印もずっと表示しておきたいことが多いんですよね

いろいろ調べたり試した結果これで解決

①#swipebox-bottom-bar.visible-barsと#swipebox-top-bar.visible-barsをコメントアウト

/*#swipebox-bottom-bar.visible-bars {
          -webkit-transform: translate3d(0, -50px, 0);
          transform: translate3d(0, -50px, 0);
}*/

/*#swipebox-top-bar.visible-bars {
          -webkit-transform: translate3d(0, 50px, 0);
          transform: translate3d(0, 50px, 0);
}*/

②#swipebox-bottom-barと#swipebox-top-barのpositionを変更

#swipebox-bottom-bar {
  	/*bottom: -50px; 　ここの-50pxを0に変更*/
	bottom:0;
}
#swipebox-top-bar {
	/*top: -50px;　ここの-50pxを0に変更*/
	top:0;
}

コメント