WordPressにJavaScript背景画像スライダーVegasを導入する

デザイン上、問題ないレベルのレイアウトを安易に実現出来るため屡々採られる一部を幅広に取るモデルがあります。

Webページの一部分だけ幅広にするデザインモデルに於いて幅広のメイン画像部分を画像スライダーにするデザインモデル

中でも図示した様にメイン画像の部分を幅広にするだけでなく 其の画像が次々に切り替わる所謂画像スライダーを実現したいと言う要請は決して少なくはないようです。

しかし此の要請の実現に於いては問題が発生します。 画像スライダー部分をページ全体を規定する一定の幅より広く取ると ブラウザの表示時、デスクトップパソコンなどで充分画面サイズが広ければ問題ないのですが 一般にノートPCなどの小さな画面では横幅が収まり切らず横スクロールが発生し、 ちょっとしたことで画面が左右に動き扱い難いだけでなく 此の様なデザインを良しとする向きには許容範囲を超える横スクロールバーが表示されてしまいます。

処で解決のために画像スライダー部分をレスポンシブ対応にすると ブラウザの横表示が狭い場合には横幅はきっちり収まるのですが 縦幅も応じて小さくなってしまい、 他のコンテンツ部分と著しい差が生まれてしまいます。 此の時画像だけならまだしもメイン画像部分には惹句などが記されることも多く 其れ等の文字は極めて読み難い状態が招かれざるを得ません。

此の問題を解決するために…

スポンサーリンク

メイン画像部分を背景画像、即ちスタイルシートで background-images に指定する方法が考えられるでしょう。 此の手法を取れば画像を常に一定のサイズで表示されるにも関わらず 幅広の部分の横幅がブラウザサイズを超えても ブラウザサイズがページ全体を規定する一定の幅以上であれば横スクロールは発生しません。

画像スライダーについてはJavaScriptで実装するのが一般的ですが 探してみた処其の様な要請を満たすライブラリが存在しましたので 実際に実装してみた処を記事にものするものです。

処で手元のWebサイトのシステムとしてはWordPressを採用していますから 妥当なプラグインがあれば利用したいのですが、 定番の画像スライダープラグインは余り背景として表示するには向いておらず 実現の為には大幅な調整が必要となります。 其処で背景で利用出来る画像スライダーと言う機能面から探してみた処 以下のプラグインが見つかりました。

cbVegas

此のプラグインでは勿論背景画像をスライドさせる機能は実装されているのですが 分かり易さに主眼を置いているようで 例えば各ページ毎に設定が効いてワンクリックで表示させ得る簡便さはあるのですが 些かカスタマイズ性は低い感があります。 従って冒頭に記した様な要請には応え難いものとなっています。

適切なプラグインがあれば其れが望ましいのですが 残念ながら見つけられませんでしたので では生のJavaScriptならば必然的にカスタマイズ性も高いだろうと思い探してみた処、 見付けたのが以下のJavaScriptライブラリ jQuery を利用した以下が公式サイトとなっているものです。

Vegas Background SlideShow

実を言えば順序は逆で 先に Vegas を見付け、背景で処理できるスライダーの存在を確認し、 ではと、WordPressで便利なプラグインを探して cbVegas を見付けたと言う経緯なのですが 設定が思う通り行かなかったという次第、 背景画像スライダー cbVegas プラグイン導入は却下してカスタマイズ性の高いJavaScript導入に踏み切ったのが 先ず見付け出しておいた Vegas と言う塩梅です。 名前が似通っているのですが製作者が同じなのか如何かなどの関係性は分かりません。 参考になる情報としては ウェブラボ(株)スタッフブログ の2017年3月24日の記事がありました。

背景画像でスライドショーを実装する

VegasプログラムのダウンロードはTransitions設定の説明ページでもある 以下からZIPファイルでまとめてダウンロードできます。

Transitions - Documentation

実際にダウンロードした最新のバージョンは 2.4.0 でした。 ダウンロードしたZIPファイルを解凍したフォルダを 其の儘WordPressのテーマ内に設けた jsフォルダの下階層へアップロードします。 WordPressのheader.phpには jsフォルダ内のvegasフォルダの vegas.min.css ファイルを読み込ませる様に記述しました。 jQueryライブラリですので勿論jQueryを読み込んだ後に読み込ませる必要があります。 また同様に専用のスタイルシートのvegasフォルダ内の vegas.min.css も読み込ませる様に記述します。

あとは最終的に稼働させるための設定JavaScriptを htmlのheadタグ内に記述するだけで、 上のTransitions設定の説明ページのコードでも 以下のセットアップページのコードでも利用すれば表示されるでしょう。

Set Up - Documentation

ただ参考サイトのも設定コードが記述されており 一般的に必要とされる要請は満たしていると思いますので 其れを利用しても良いかも知れません。 手元の作成WebサイトはWordPressですので $ で開始されるコードだとコンフリクトの問題が出る可能性がありますので 例によって必要部分を jQuery に書き換える必要もあります。 以上鑑みて設定コードは以下の様な記述にし、 目論見通り表示されました。 なお外部ファイルのして此れもheader.phpで読み込ませる様に記述しました。

jQuery(function(){
  jQuery('#vegasSlider').vegas({ //背景画像でスライドショーしたい場所の設定
    slides: [
      //スライドする画像を配列で設定
      { src: './wp-content/themes/theme_name/js/vegas/img/slide01.jpg' },
      { src: './wp-content/themes/theme_name/js/vegas/img/slide02.jpg', transition: 'slideRight2' },
      { src: './wp-content/themes/theme_name/js/vegas/img/slide03.jpg', transition: 'slideDown2' }
    ],
    delay: 5000, //スライドまでの時間ををミリ秒単位で設定
    timer: true, //タイマーバーの表示/非表示を切り替え
    // overlay: 'img/01.png', //オーバーレイする画像の設定
    animation: 'originalanime', //スライドのアニメーションを設定
    transition: 'blur', // 'swirlLeft2', //スライド間のエフェクトを設定
    transitionDuration: 1000 //エフェクト時間をミリ秒単位で設定
  });
});

Vegas公式サイトからはイメージスライド毎にtransition指定の可能なのが読み取れます。 其れを記述したのがコード中の最初と2番目の赤字部分です。 また同じく公式サイトからはanimationが独自追加可能であるのが読み取れます。 其の独自アニメーションはスタイルシートに記述する仕様となっています。 独自アニメーションを指定しているのが3番目の赤字部分になります。 此処で指定した独自アニメーション animation: 'originalanime' の記述はスタイルシートに以下のように記しました。 デフォルトのアニメーションのズームが少しきつく感じられたのでズームの幅を小さく変更したものです。

.vegas-animation-originalanime {
  animation: setouchi 5s ease-out -1s 1 alternate;
}
@keyframes originalanime {
  0% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

WordPressのプラグインのcbVegasでは 各投稿記事、固定ページに於いてチェックするとページ全体の背景に適用されてしまいましたが Vegasでは 設定コードの冒頭にDOMのセレクタで適用範囲を指定可能ですので 其れだけでも今回の要請は満たせます。

加えて各スライド毎に遷移仕様を変えたり 独自アニメーションの追加迄可能となっています。 設定コードに望みの動作を書き加えるに上の Transitions設定の説明ページや 以下の公式の設定ページが用立つでしょう。

Settings - Documentation

独自のアニメーションを使用したい場合には CSS3で実装する仕様となっていますので、 スタイルシートのアニメーションとしては以下の様な CSS3リファレンス情報ページが参考になるかも知れません。

animation-CSS3リファレンス

スタイルシートのアニメーションは思い通りに動かすのは なかなか難易度が高い気もします。 ただ一般には最も目を引く部分でもありますので 上手く嵌まれば訴求力も高い画像スライダーとなるものと思います。 斯くなる上で此れも一般には気になられる向きの多いだろう 横スクロールが無駄に発生せず、下手に縮小も発生しない今回の画像スライダーは 時に依っては実に使い勝手の宜しからんものと思います。

スポンサーリンク