ITメモ
Make SiteMap Word Press




【Word Press】背景画像スライダー「jQuery【Vegas】」を組み込む方法



「Vegas」は、「Javascript」のためのライブラリ―「jQuery」の1つで、
背景画像をスライドショーにすることができる。


「Vegas」Official Web : https://vegas.jaysalvat.com/






【jQuery】背景画像スライダー「Vegas」とは


「jQuery」の「Vegas」は、 背景画像を、一定時間ごとに変更することができる「Javascript」プログラム。

「Vegas」のOfficialWeb「Vegas Background SlideShow」から ファイルをダウンロードして、自身のWebに組み込んで使用する。
「Word Press」にも組み込み可能。


Back


「Vegas」のダウンロードファイルの中身

ダウンロードした「Vegas」ファイルには、 ・vegas.js
・vegas.min.js
・vegas.css
・vegas.min.css
・複数のオーバーレイ画像ファイル
が含まれています。
これに、背景にしたい画像を2つ以上用意する必要があります。


Back


「Vegas」の背景画像のスライドショーに必要なもの

「Vegas」ダウンロードファイル

・vegas.js
・vegas.min.js
・vegas.css
・vegas.min.css
・複数のオーバーレイ画像ファイル

自分で用意するもの

・画像ファイル2点以上(背景スライドショー用)
・「Javascript」外部ファイル(実行プログラムを記述)




「.min.js」「.min.css」などの「.min」が付く拡張子のファイルは、
改行やスペースなど、省略できるものを省いたファイルなので、 「.min」が付いていないファイルと中身は同じ。
「.min」が付く拡張子のファイルは、
余計なものがないので、
処理速度が速い。


Back


「Vegas」に必要なファイルの格納場所


ファイル格納場所
実行用「Javascript」外部ファイル 「Word Press」の使用している「テーマ」ディレクトリ内の「header.php」と同じディレクトリに配置。
ファイル名は自由。「BackgroundSlide.jp」など。
例:「WordPressのディレクトリ/wp-content/themes/テーマ名/header.php」
「Vegas」ディレクトリ・ファイル 「Vegas」の公式Webなどからダウンロードする。
「Word Press」の使用している「テーマ」ディレクトリ内の「header.php」以下に配置。
例:「WordPressのディレクトリ/wp-content/themes/テーマ名/header.php」
背景画像ファイル 「Word Press」ディレクトリ最上位の「index.php」ファイルがある階層以下にディレクトリにまとめて配置。


Back


「Vegas」ファイルの読み込み方法


「Vegas」をダウンロードできて、ファイルを設置できたら、
次は、「Vegas」のファイルをWebに読み込んで、
実行できるように設定します。


読み込みが必要な「Vegas」ファイル

読み込みが必要な「Vegas」ファイルは、
・https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js(直接リンクさせる)
・vegas.js
・vegas.css
・実行コードを記述する「Javascript」ファイル(ファイル名は自由)
です。


読み込みコードを記述するファイル

読み込みコードを記述するファイルは、
・使用しているテーマの「header.php」
に記述します。
使用しているテーマの「header.php」内にある「head」タグ内の最後に記述。
「WordPressのディレクトリ/wp-content/themes/テーマ名/header.php」

記述方法は、いくつかありますが、
推奨されている方法がありますので、
できるだけ推奨の方法で行いたいのですが。。。。。

読み込みが上手に行かない時があるので、
直接シンプルに記述したりしています。


推奨されている「header.php」への書式

function add_files(){
wp_enqueue_style('ハンドル名','cssファイルのパス');
wp_enqueue_script('ハンドル名','jsファイルのパス');
}

//上記のファイル読み込み関数を「wp_enqueue_scripts」にフックさせる。
add_action('wp_enqueue_scripts', 'add_files');
読み込まれないこともあるので、シンプルに直接記述する方法も要チェック。


シンプルで確実な「header.php」への書式


推奨している記述方法で、 反応しない時は、シンプルに直接記述して対応もできます。
ヘッダファイル内に記述したところ、問題なく機能しました。

<head>
既存のプログラムコード

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js">></script>
<script type="text/javaScript" src="<?php echo get_template_directory_uri() ?>/vegas/vegas.js" charset="utf-8"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/vegas/vegas.css" media="all">

<script type="text/javaScript" src="<?php echo get_template_directory_uri() ?>/実行プログラムファイル名.js" charset="utf-8"></script>
</head>



下記のような位置も良い。
ページを開いてすぐに実行する時に良い配置。
<head>
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/vegas/vegas.css" media="all">
</head>
<body>
<!–
コンテンツ
–>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js">></script>
<script type="text/javaScript" src="<?php echo get_template_directory_uri() ?>/vegas/vegas.js" charset="utf-8"></script>
</body>


Back


実行ファイル(Javascript)への記述


$(function() {
$('#ID名').vegas({
slides: [
{ src: './img/slide01.jpg' },
{ src: './img/slide02.jpg' },
{ src: './img/slide03.jpg' },
{ src: './img/slide04.jpg' }
],
//overlay: './wp-content/themes/twentyseventeen/js/vegas/overlays/01.png',
delay: 5000, //スライドまでの時間ををミリ秒単位で設定
timer: true, //タイマーバーの表示/非表示を切り替え
animation: 'random', //スライドのアニメーションを設定
transition: 'fade2', //スライド間のエフェクトを設定
transitionDuration: 4000 //エフェクト時間をミリ秒単位で設定
});
});



Back


CSSへの記述


#ID名 {
width: 100vw;
height: 100vh;
}



Back


アニメーションの設定方法


「アニメーション」は、
画像効果を適用するときの、視点の位置を決める設定。
視点を基点にして、トランジションなどが実行されます。


アニメーション説明
kenburns 中央に視点を置いて、ズームアウトする。
kenburnsUp 上部に視点を置いて、ズームアウトする。
kenburnsDown 下部に視点を置いて、ズームアウトする。
kenburnsRight 右側に視点を置いて、ズームアウトする。
kenburnsLeft 左側に視点を置いて、ズームアウトする。
kenburnsUpLeft 左上に視点を置いて、ズームアウトする。
kenburnsUpRight 右上に視点を置いて、ズームアウトする。
kenburnsDownLeft 左下に視点を置いて、ズームアウトする。
kenburnsDownRight 右下に視点を置いて、ズームアウトする。
random 全てのアニメーションをランダムに実行。



アニメーション設定をカスタマイズする方法

「vegas」では、オリジナルのアニメーション設定をすることができます。
「.vegas-animation-オリジナルアニメーションの名前」として指定して設定を行う。


オリジナルのアニメーション作成する方法

//CSSに記述

.vegas-animation-kenburns {
animation: kenburns ease-out;
}

@keyframes kenburns {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

ランダムモードに、オリジナルアニメーションを追加する方法

$('#ID名').vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
],
animationRegister: [ 'myAnimation1', 'myAnimation2' ]
});
という記述で「Javascript」に追加する。



Back


トランジションの設定方法


「トランジション」は、スライドショーで、
次の画像に移行するときの、画像効果のことで、
画像ごとに、トランジションを指定することができる。
「Vegas」は、「CSS3」のトランジションを利用しています。
古いバージョンのブラウザはシンプルなフェードトランジションになります。



$('#ID名').vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
],
transition: 'fade'
});


トランジション説明
fadeフェードして次の画像へ移行する。
fade2フェードして次の画像へ移行する。移行時に透明度あり。
slideLeft左から移動してくるように次の画像へ移行する。
slideLeft2左から移動してくるように次の画像へ移行する。移行時に透明度あり。
slideRight右から移動してくるように次の画像へ移行する。
slideRight2右から移動してくるように次の画像へ移行する。移行時に透明度あり。
slideUp下から移動してくるように次の画像へ移行する。
slideUp2下から移動してくるように次の画像へ移行する。移行時に透明度あり。
slideDown上から移動してくるように次の画像へ移行する。
slideDown2上から移動してくるように次の画像へ移行する。移行時に透明度あり。
zoomInズームイン(拡大)しながら次の画像へ移行する。
zoomIn2ズームイン(拡大)しながら次の画像へ移行する。移行時に透明度あり。
zoomOutズームアウト(縮小)しながら次の画像へ移行する。
zoomOut2ズームアウト(縮小)しながら次の画像へ移行する。移行時に透明度あり。
swirlLeft左回りに回転しながら次の画像へ移行する。
swirlLeft2左回りに回転しながら次の画像へ移行する。移行時に透明度あり。
swirlRight右回りに回転しながら次の画像へ移行する。
swirlRight2右回りに回転しながら次の画像へ移行する。移行時に透明度あり。
burn燃えるような印象の加工から画像へと移行する。
burn2燃えるような印象の加工から画像へと移行する。移行時に透明度あり。
blurぼかし加工をなくしながら画像へと移行する。
blur2ぼかし加工をなくしながら画像へと移行する。移行時に透明度あり。
flash真っ白から画像へと移行する。
flash2真っ白から画像へと移行する。移行時に透明度あり。


遷移時間は、「transitionDuration」オプションによって、ミリ秒単位で指定可能。
配列を指定することにより、画像ごとのトランジションも指定が可能。

トランジションを実行コードに記述する方法

$('#ID名').vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
],
transition: [ 'fade', 'zoomOut', 'swirlLeft' ]
});


トランジションをカスタムする方法

「Vegas」において、
トランジションをカスタムすることができる。
カスタム方法は、
「.vegas-transition-オリジナルトランジション名」
という書式でCSS設定をすることで、トランジションを作成することが可能。

クラス名説明
.vegas-transition-オリジナルトランジション名 スライド作成時に適応されるCSSスタイル。
.vegas-transition-オリジナルトランジション名-in スライドが表示される時に適応されるCSSスタイル。
.vegas-transition-オリジナルトランジション名-out スライドが消えるときに適応されるCSSスタイル。


オリジナルトランジションを作成するときのCSS書式

.vegas-transition-fade,
.vegas-transition-fade2 {
opacity: 0;
}

.vegas-transition-fade-in,
.vegas-transition-fade2-in {
opacity: 1;
}

.vegas-transition-fade2-out {
opacity: 0;
}



オリジナルトランジションをランダムモードに追加する方法


$('#ID名').vegas({
slides: [
{ src: '/img/slide1.jpg' },
{ src: '/img/slide2.jpg' },
{ src: '/img/slide3.jpg' }
],
transitionRegister: [ 'myTransition1', 'myTransition2' ]
});


Back