Web全般 wordpress

VEGAS BACKGROUND SLIDESHOWの使い方

投稿日:2017年11月8日 更新日:

vegas使い方

 

VEGAS BACKGROUND SLIDESHOWの使い方

 

画像だけを利用した基本的な使い方

 

独自で作成したjsファイルがあるならそちらに以下のコードを記述してからサーバーにアップしてください。

なければ、テーマヘッダー(header.php)に以下のコードを記述してください。

その場合は、<script>以下のコード</script>のようにしてください。

jQuery(document).ready(function(){
jQuery('.top-img').vegas({      //.top-imgのクラス名は自分の好きな覚えやすいのでOKです
   delay: 7000,
   timer: false,
   shuffle: true,
   firstTransition: 'fade',
   firstTransitionDuration: 5000,
   transition: 'slideDown2',
   transitionDuration: 2000,
   slides: [
     { src: <span class="syntax-string">'/img/slide1.jpg'</span> },
     { src: <span class="syntax-string">'/img/slide2.jpg'</span> },
     { src: <span class="syntax-string">'/img/slide3.jpg'</span> },
     { src: <span class="syntax-string">'/img/slide4.jpg'</span> }
           ]
});
});

 

htmlでの書き方は、

表示したいところに、

<div class="top-img"></div>    <!-- .top-imgのクラス名は自分の好きな覚えやすいのでOKです。ただし上記と同じにしてください。 -->

を記述してください。

 

自分なりに若干変更したのは以下の通りです。

 

jQuery(document).ready(function(){
jQuery('.top-img').vegas({
   overlay: 'https://○○○.com/wp-content/themes/△△△/images/overlays/04.png',
   transition: 'fade',
   transitionDuration: 4000,
   delay: 10000,
   animation: 'random',
   animationDuration: 20000,
   timer: false,
   slides: [
     { src: 'https://○○○.com/wp-content/themes/△△△/images/□□1.jpg' },
     { src: 'https://○○○.com/wp-content/themes/△△△/images/□□2.jpg' },
     { src: 'https://○○○.com/wp-content/themes/△△△/images/□□3.jpg' }
           ]
});
});

 

公式サイトには設定方法がいろいろあるので試してみてください。

 

動画も一緒に表示させる方法

 

次は、画像と動画を混合させて動かしてみます。

前回の記事はこちら→WordPressで画像をかっこよく見せるVEGAS

 



 

-Web全般, wordpress
-, , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

360カメラ

できた!360度カメラの画像をWordPressに

  プラグインで簡単に!   360度カメラで撮影した画像をWordPress(ワードプレス)の固定ページや投稿ページまたは、カスタム投稿タイプなどに使いたいときに便利なのが、 『 …

選手登録メンバー登録

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた④

  1.アイキャッチ画像をカスタマイズ   テーマによっては、変更しなくてもきれいに表示されることもあります。 メンバー紹介などの個人個人のページでは、300px×400pxの画像 …

wordpressテーマ

WordPress無料有料【LIQUID PRESS】子テーマを作ろう

  プロが選ぶWordPressテーマテンプレート【LIQUID PRESS】   レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対 …

レスポンシブWordPressテーマ

プロが選ぶWordPressテーマテンプレート無料有料

レスポンシブWordPressテーマ 「LIQUID PRESS」 累計2千DL突破! 日本語対応レスポンシブWordPressテーマ スマホ/PC表示切替OK! Bootstrap対応! こんな方に …

Delete kasutamufi-rudo

カスタムフィールドを削除できるプラグインはこれでOK!

サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …