Adobeスクールパートナー(ブロンズ)

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

Web

Vegas2で背景画像をスライドショーに(jQueryプラグイン)

使用ソフト: Dreamweaver CS5  

cssで背景画像として設置していた画像をスライドショーにしたい。画面いっぱいに画像をスライドショーとして見せたい、そんなときに使えるのがVegas2というjQueryプラグインです。
エフェクトやオーバーレイなどの細かい切り替えオプションも充実しており、非常に使い勝手が良いプラグインです。

※jQueryの読み込みがすでに完了してあることが前提です!
まだの方はjQueryのダウンロードからお願いします。

jQueryダウンロード

Vegas2の使い方

Vegas2画面

まずは以下のサイトからVegas2をダウンロードします。

Vegas2 公式サイト
Git Hub

ダウンロードしたファイルの中から
「vegas.min.css」
「vegas.min.js」の二つのファイルを使います。

Vegas2のファイル内容

「vegas.min.css」をcssフォルダに、「vegas.min.js」をjsフォルダにそれぞれコピーします。

その後、この2つをhtmlに読み込みます。
「vegas.min.css」はheadタグ内に、「vegas.min.js」はbodyタグの終了直前にscriptタグを使って読み込みます。

タグ配置HTMLサンプル

また、別に「function.js」というタイトルのjsフォルダ作成して、「vegas.min.js」と同様にbody終了直前に配置しておきます。
このファイルを使って表示する画像の指定やエフェクトなどオプションの調整をします。
今回はfunctionという名前をつけましたが、ファイル名は任意で好きなものに変更してください。

これで準備は完了です。

実際に動かしてみよう

「function.jp」に以下の記述を追加します。

$(function() {
$(‘body’).vegas({
slides: [
{ src: ‘./images/sumple.jpg’ },
{ src: ‘./images/sumple.jpg’ },
{ src: ‘./images/sumple.jpg’ },
{ src: ‘./images/sumple.jpg’ }
],
});
});

ブラウザ全体に画像をスライドしたいときはbodyを、一部に適用したい場合はidタグなどをつけて指定します。(上記ではbodyに指定してます。)
idなどで指定する場合は、別途cssで画像の表示範囲を作っていないと画像が表示されないので注意してください。

「./images/sumple.jpg」部分に実際にスライドに使用したい画像を指定します

これで基本的な設定は完了です。ここまで出来ればスライドショーが反映されているはずです。

オプションを適用する

Vegas2はあらかじめ多くのタグが指定されており、それを追加することで自由にスライド内容をカスタマイズすることができます。

Vegas2公式サイト設定画面

公式サイト 設定一覧ページ

また、フェードイン、フェードアウトのエフェクト設定や、スライドの細かい動きなども個別に設定することができます。

以下のページにエフェクトのデモと設定一覧があるので参考にしてみてください。

公式サイト エフェクト一覧

オプションを追加する際は「function.js」内に記載します。
複数追加するときは、,(カンマ)で区切ることを忘れずにしてください。

$(function() {
$(‘body’).vegas({
slides: [
{ src: ‘./images/penguin.jpg’ },
{ src: ‘./images/tiger.jpg’ },
{ src: ‘./images/wolf.jpg’ },
{ src: ‘./images/fox.jpg’ }
],
delay: 7000,
transition: ‘blur’,
animation: ‘kenburns’
});
});

 

以上でVegas2の使い方の説明は以上です。

比較的簡単に設定することができ、多くのエフェクトも用意されているのでぜひ使ってみてください。

  • このエントリーをはてなブックマークに追加
hulu dTV

関連記事

  1. Flexbox(縦並び)

    Web

    Flexboxで縦並びを簡単に!

    以前、ご紹介しました「Flexboxで横並びを簡単に!」…

  2. Web

    【実例サンプルあり】簡単に実装できるcssスニペット集

    この記事では、短いコードで実装可能なcssプロパティを紹介して…

  3. Web

    HTML&CSS初心者が通る道。バリデーターで文法チェック

    初心者みんなが通る道(かな?)間違い探しHTMLを習い始めたと…

  4. Dreamweaver

    WebサイトにGoogleマップを埋め込む方法

    HTMLでwebサイトにGoogleマップを埋め込む方法を今回はご紹介…

  5. イラスト

    Web

    JQueryのランダム要素簡単実装

    ○はじめに難しそうですが案外簡単に使えますので、初心者の方向けにざ…

  6. Web

    【CSS】CSS Gradientで複雑なグラデーションを作成

    CSS Gradientというフリーサイトを使ってCSSで複雑なグラデ…

人気の記事

おすすめの参考書

PAGE TOP