[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
Post on:2012年2月10日
sponsors
ギャラリーモードにも対応した、ブラウザ枠いっぱいに写真などの背景画像を簡単に配置できるjQueryのプラグインを紹介します。
画像は、ブラウザのサイズを変更してもアスペクト比が維持されて美しく表示されます。
[ad#ad-2]
bgStretcherのデモ
デモではbgStretcherの基本機能からオプションまで、試すことができます。
まずは、デフォルトのものから。
デモページ：幅1200pxで表示
ブラウザのサイズを変更しても画像のアスペクト比が維持されたまま表示され、表示サイズが小さい場合はトリミングされます。
デモページ：幅800pxで表示
画像を複数枚セットするとスライドショーにもなり、自動・手動でスライドでき、順番表示だけでなくランダム表示にも対応しています。
[ad#ad-2]
複数枚セットした際の切り替え時のエフェクトも用意されています。
デモページ：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>
sponsors
