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

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

指定した要素の背景画像をスライドショーにすることができるjQueryプラグイン「BgSwitcher」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • チャップアップを安く買う方法はこちら
  • このエントリーをはてなブックマークに追加

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

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

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

デモページを見る

スポンサードリンク

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

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

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

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

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

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

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

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」の部分が切り替える背景画像です。

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

キー 初期値 説明
images Array [] 切り替える背景画像を配列で指定
interval number 5000 切り替えの間隔
start boolean true $.fn.bgswitcher(config)をコールした時に切り替えを開始する
loop boolean true 切り替えをループする
shuffle boolean false 背景画像の順番をシャッフルする
effect string fade エフェクトの種類
duration number 1000 エフェクトの時間
easing string swing エフェクトのイージング

ちなみに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>

あとがき

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

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

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

  1. ワード・アントニオ・プレス

    こちらの記事をもとに、Wordpressへ難なく実装することができました。ありがとうございました!

    全てのページでjsがロードされると思うと、headder.phpに書くべきか悩みましたが、他に良い方法も思いつかず、結果headder.phpに記述しました。

    とてもわかりやすかったです!

    1. himecas Post author

      ワード・アントニオ・プレスさん、コメントありがとうございます。お役に立てたみたいで光栄です。

      特定のページだけファイルを読み込むのであれば、条件分岐タグで出し分けると良いですよ。例えば、トップページだけに表示させるのであれば、こんな感じで記述します。

      <?php if(is_front_page()): ?>
      <script src="//code.jquery.com/jquery-1.12.0.min.js">
      <?php endif; ?>

      詳しくはCodexをご参照ください。

コメントを残す

メールアドレスが公開されることはありません。