指定した要素の背景画像をスライドショーにすることができるjQueryプラグイン「BgSwitcher」

BgSwitcherは、スライドショーのように背景画像を切り替えることができるjQueryプラグインです。

画面いっぱいの背景画像をスライドさせるプラグインはよくありますが、BgSwitcherは背景のサイズに合わせてスライドさせることができます。

動きについては、以下デモページにて確認することが可能です。

デモページを見る

ステップ1. BgSwitcherのダウンロードと設置

GitHubからBgSwitcherのファイル一式をダウンロードします。

ダウンロードしたZIPファイルを解凍し、中にあるjquery.bgswitcher.jsをサーバー上の適当な場所にアップロードしてください。

ステップ2. HTML/CSSのマークアップ

背景画像をスライドさせる部分をマークアップします。以下は記述例です。

<div class="box">背景が切り替わります。</div>

CSSでは背景画像のサイズに合わせて、横幅と高さの領域を確保します。

.box{
 width: 960px;
 height: 450px;
 position:relative;
}

ステップ3. jQueryとBgSwitcherの呼び出し

最後にjQueryとBgSwitcherを呼び出して、背景画像をスライドさせます。

以下のようなスクリプトを</body>の直前に記述してください。

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery.bgswitcher.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".box").bgswitcher({
 images: [
 "images/bg1.png",
 "images/bg2.png",
 "images/bg3.png",
 ],
 effect: "fade",
 easing: "swing",
 interval: 5000,
 loop: true
 });
});
</script>

ファイルパスは適宜変更してください。

「.box」の部分は、背景画像を表示させたい要素のクラスを指定します。「images/bg○.png」の部分が切り替える背景画像です。

各オプションについては、デモページで値を変更しながら動きを確認しましょう。

ちなみにWordPressの場合は、以下のように記述します。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.bgswitcher.js"></script>
<script type="text/javascript">
jQuery(function($) {

$(document).ready(function(){
  $(".header-wrapper").bgswitcher({
    images: [
    "<?php echo get_template_directory_uri(); ?>/images/bg1.png",
    "<?php echo get_template_directory_uri(); ?>/images/bg2.png",
    "<?php echo get_template_directory_uri(); ?>/images/bg3.png",
    ],
    effect: "fade",
    easing: "swing",
    interval: 5000,
    loop: true
  });
});

});
</script>

背景画像がうまく表示されない場合

私が試した時は、BgSwitcherによって指定されるz-indexが邪魔して、背景画像がちゃんと表示されませんでした。

サイトの構成によっては、同じようにz-indexが邪魔して背景が真っ白になってしまうかもしれません。

そんな時は、BgSwitcherによって自動挿入されるdiv要素に対して、以下のように指定してあげるとうまく表示されると思います。

#bs-demo > div{
  z-index: 0 !important;
}

自動挿入されるdiv要素は、指定した背景画像を表示する要素の直前に挿入されます。以下はデモページの例ですが、こんな感じでdiv要素が自動挿入されます。

<div id="bs-demo">

<div style="position: absolute; z-index: -1; overflow: hidden; top: 537.594px; left: 373.5px; width: 700px; height: 500px; margin: 0px; border: 0px none rgb(34, 34, 34); background: url(&quot;http://misc.rewish.jp/jquery-bgswitcher/images/image_3.jpg&quot;) 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">
<div style="position: absolute; z-index: -1; overflow: hidden; top: 0px; left: 0px; width: 700px; height: 500px; margin: 0px; border: none; opacity: 0; background: url(&quot;http://misc.rewish.jp/jquery-bgswitcher/images/image_2.jpg&quot;) 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"></div>
</div>

<div class="box" style="background: none;">
Lorem ipsum dolor sit amet, ea alii ornatus graecis sed, id reque aeque putent est. Ne albucius menandri sit, cu iudico accusamus sententiae sea, vix dicat mediocritatem eu. Ei nam nulla commune, graece urbanitas consequuntur cum eu. Usu idque argumentum ne.Pro ei essent eirmod doctus, id pri sumo petentium temporibus. Pro semper erroribus referrentur te, mel in expetendis instructior. Dictas everti delectus eum ne, et pri adhuc legimus periculis, legendos laboramus forensibus pro ex. Mea ea ridens hendrerit, eam at vivendo denique conclusionemque.
</div>

</div>

あとがき

画面いっぱいの背景画像を切り替えるのではなく、指定した要素の背景画像を切り替えるという動きは、結構めずらしいと思います。

背景画像に動きを加えたいというケースは結構あるのではないでしょうか。そんな時は、ぜひお役立てください。