[JS]背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas

写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。

ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。

Vegas Background jQuery Plugin

[ad#ad-2]

デモでは写真画像を背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。

デモページ

サムネイルをクリックすると、写真画像が変更されます。

Vegasの実装

外部スクリプト

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="/vegas/jquery.vegas.js"></script>

スタイルシート

スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。

<link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css">

スクリプト

スクリプトで背景画像とオーバーレイ用の画像を指定します。

$( function() {
  $.vegas({
    src:'/images/background.jpg'
  });
  $.vegas('overlay', {
    src:'/vegas/overlays/13.png'
  });
});

[ad#ad-2]

スクリプトのドキュメントでは、リアルタイムにさまざまなオプションを試すことができます。

オーバーレイのパターンも数多く用意されています。

オーバーレイのパターン

各パターン画像を選択すると、リアルタイムに反映されます。

Documentation: Overlay

Vegasのダウンロード

下記ページより、スクリプトをはじめ、スタイルシート、オーバーレイ用の画像などがダウンロードできます。

• Vegas -GitHub