[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher

ギャラリーモードにも対応した、ブラウザ枠いっぱいに写真などの背景画像を簡単に配置できるjQueryのプラグインを紹介します。
画像は、ブラウザのサイズを変更してもアスペクト比が維持されて美しく表示されます。

サイトのキャプチャ

bgStretcher

bgStretcherのデモ

デモではbgStretcherの基本機能からオプションまで、試すことができます。

まずは、デフォルトのものから。

デモのキャプチャ

デモページ:幅1200pxで表示

ブラウザのサイズを変更しても画像のアスペクト比が維持されたまま表示され、表示サイズが小さい場合はトリミングされます。

デモのキャプチャ

デモページ:幅800pxで表示

画像を複数枚セットするとスライドショーにもなり、自動・手動でスライドでき、順番表示だけでなくランダム表示にも対応しています。

複数枚セットした際の切り替え時のエフェクトも用意されています。

サイトのキャプチャ

デモページ:Fade

フェードで画像を切り替えます。

サイトのキャプチャ

デモページ:Simple Slider

スライドで画像を切り替え、方向は上下左右から選択できます。

サイトのキャプチャ

デモページ:Super Slider

スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。

bgStretcherの主な特徴

  • セットアップはシンプル
  • 全てのモダンブラウザをサポート
  • 画像は一枚だけでなく、複数枚にも対応

対応ブラウザ

  • Internet Explorer 6, 7, 8, 9
  • Firefox 2, 3, 4
  • Opera 9+
  • Safari
  • Chrome

bgStretcherの使い方

Step 1: ファイルのダウンロード

サイトの「Download」よりファイル一式をダウンロードします。
一式には必要なファイル全て(jqeury.jsも)が含まれています。

Step 2: 外部ファイル

外部ファイルを下記のように<head>~</head>に記述します。

<script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../bgstretcher.js"></script>
<link rel="stylesheet" href="../bgstretcher.css" />

ファイルのパスは適宜変更してください。

Step 3: JavaScript

次のコードで、bgStretcherをセットアップします。
まずは、ページ全体の背景にセットする場合は、bodyを指定します。

<script type="text/javascript">
$(document).ready(function(){
//  Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>

特定のdiv要素(.classname-of-div)の背景にする場合は、下記のようになります。

<script type="text/javascript">
$(document).ready(function(){
//  Initialize Backgound Stretcher
$('.classname-of-div').bgStretcher({
images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg'], imageWidth: 1024, imageHeight: 768
});
});
</script>

Step 4: HTML

bgStretcherを配置するページに、bodyまたはdiv要素を記述します。

<body>
<div class="classname-of-div">
Your content goes here...
</div>
</body>

top of page

©2017 coliss