横幅いっぱいに画像を表示してくれるjQueryプラグイン-bgStretcher

ブラウザの横幅いっぱいに画像を表示してくれるjQueryプラグインbgStretcherを使ってみました。bgStretcherはブラウザのサイズを小さくしても画像のアスペクト比が維持されて表示されます。

このブログの背景は画像を横いっぱいに広げるのをCSSで表示しているのですが、iPhone等の横幅が小さい画面でみると画像が縦に伸びてしまって嫌だなぁと思っていたんです。丁度こちらの記事で”[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher | コリス”プラグインが紹介されていたので早速使ってみました。

サンプルも作りました。

Internet Explorer 6, 7, 8, 9、Firefox 2, 3, 4、Opera 9+、Safari、Chromeにも対応しているようです。幅広いブラウザに対応しているので実用的に使えそうです。
オプションで、背景全部を画像にもできますし、指定したボックスの中だけに画像を配置したりもできます。スライドではなく一枚の画像だけという事もできます。スライドのアニメーションも色々ありおもしろいです。

jQueryプラグイン-bgStretcher

デモとダウンロード

デモ→Background Stretcher Demo

ダウンロード→bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area. — ajaxBlender.com

使い方

ヘッダー内でjQuery本体とプラグインとbgstretcher.cssを読み込みます。

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

続けてヘッダー内で下記の様に記入します。

<script type="text/javascript">
$(document).ready(function(){
$('BODY').bgStretcher({
//bodyの背景にするなら'body'
//divに配置するならそのdivの要素名を記入
images: ['images/sample-1.jpg', 'images/sample-2.jpg',  imageWidth: 1024, imageHeight: 768
//配置する画像のパスと画像の横と縦のサイズを記入
});
});
</script>

これだけで基本の設置ができます。

オプション

オプションを設定すればスライドのスピードやアニメーション等変更できます。()内はデフォルトの設定です。

resizeProportionally	(true)	
//false を指定で画像を小さくした時にリサイズされなく比例して縮小される
resizeAnimate	(false)
//true でリサイズする時にアニメーションを付ける
images	(empty)	
//背景にする画像を設定。画像を複数も指定出来る。
imageWidth	(1024)	
//画像サイズの横
imageHeight	(768)	
//画像サイズの縦
maxWidth	(auto)	
//画像の最大横サイズ
maxHeight(auto)
//画像の最大縦サイズ
nextSlideDelay	(3000 (3 seconds)	)
//次の画像へスライドするまでの時間
slideShowSpeed(normal)	
//スライドする時間
slideShow	(true)	
//falseでスライドショーにしない
transitionEffect	(fade)	
//切り替わる時のエフェクト:fade→フェード、simpleSlide→くるくるスライドする、
//superSlide→紙芝居のようにスライドする、 none→エフェクトなし。
slideDirection	(N)	
//スライドする方向→N – north, S – south, W – west, E – East 
//(if transitionEffect = superSlide use also: NW, NE, SW, SE).
sequenceMode	(normal)	
//画像を表示する順番→ back, random
buttonPrev(empty)	
//prevボタンの名前
buttonNext	(empty)	
//nextボタンの名前
pagination	(empty)	
//ページネーションの名前
preloadImg	(false)	
//ローディング画像を設定
stratElementIndex	 (0)	
//最初に表示する画像の何番目かを指定

作ってみたサンプル

■作ってみたサンプルのデモ

1→memocarilogdemo | Background Stretcher1
画像を背景いっぱいにしただけです。

2→memocarilogdemo | Background Stretcher2
指定したボックスの中にだけ画像を設定しました。

サンプルで使用した動物達の画像はこちらからダウンロードさせて頂きました!高解像の写真が沢山あって助かります。→PHOTO STOCKER – 高解像度フリー写真素材を無料配布。商用可能。ホームページにも。

• サンプル1のheadとbodyのコード

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="bgstretcher.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('body').bgStretcher({
            images: ['gbimage.jpg'],
            resizeProportionall:true,
            imageWidth: 1500, 
            imageHeight: 1004, 
        });
    });
</script>
</head>
<body>
<div id="content">
<h1>memocarilogdemo | Background Stretcher</h1>
<p>Lorem ipsum (略)</p>
</div>
</body>

• サンプル1のcss

HTML {_background: url(/images/trans.gif) no-repeat fixed;}
.bgstretcher-area { text-align: left; }
.bgstretcher, .bgstretcher UL, .bgstretcher UL LI {
	position: absolute;
	top: 0;
	left: 0;
}
.bgstretcher UL, .bgstretcher UL LI {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bgstretcher {
	background: black;
	overflow: hidden;
	width: 100%;
	position: fixed;
	z-index: 1;
	_position: absolute; /*IE6 doesn't support fixed positioning*/
	top: 0;
	left: 0;
}

* { margin: 0; padding: 0;  }
h1,p{width: 100%;padding:20px 0;color: #fff;text-align: center;}
#content{width: 70%;margin: 0 auto;}
a{color: #fff;}

• サンプル2のheadとbodyのコード

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="bgstretcher.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
         $('#content').bgStretcher({
        resizeProportionall:true,
        nextSlideDelay:5000,
        slideShowSpeed:3000,
        images: ['gbimage.jpg','gbimage2.jpg','gbimage3.jpg'],
        imageWidth: 1500, 
        imageHeight: 1004, 
        slideDirection: 'E',
        transitionEffect: 'simpleSlide',
        sequenceMode: 'random',
        });
    });
</script>
</head>
<body>
<div id="content">
<h1>memocarilogdemo | Background Stretcher</h1>
<p>Lorem ipsum (略)</p>
<P><a href="#sample">元のページへ戻る</a></P>
</div>
</body>

• サンプル2のcss

HTML {_background: url(/images/trans.gif) no-repeat fixed;}
.bgstretcher-area { text-align: left; }
.bgstretcher, .bgstretcher UL, .bgstretcher UL LI {
	position: absolute;
	top: 0;
	left: 0;
}
.bgstretcher UL, .bgstretcher UL LI {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bgstretcher {
	background: black;
	overflow: hidden;
	width: 100%;
	position: fixed;
	z-index: 1;
	_position: absolute; /*IE6 doesn't support fixed positioning*/
	top: 0;
	left: 0;
}
* {margin: 0; padding: 0;}
body{background-color:#ccc;}
h1,p{width: 100%;padding:20px 0;color: #fff;text-align: center;}
#content{
	width: 65%;	height: 700px;margin: 30px auto;border:solid 1px #999;overflow: hidden;
}
a{color: #fff;}

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ