背景画像をブラウザ幅いっぱいにフルスクリーン表示をさせ、
かつ画像をスライドショーできるスクリプト「jQuery MaxImage」をご紹介します。
まずはこちらのデモをご覧下さい。
サンプルデモ・ダウンロードはこちら
ブラウザを目一杯広げても、画像が切れないのがわかります。
画像が小さすぎると伸びたときにボヤけるのである程度大きめの画像を用意しましょう。
画像はimgタグでhtml上に配置するのが特徴です。
オプションにより微調整やセッティングが可能です。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景画像をスライドショー付きでフルスクリーン表示できるスクリプト「jQuery MaxImage」</title>
<script src="lib/jquery-1.7.2.js"></script>
<script src="lib/jquery.maximage.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.maximg {
display:none;
}
</style>
</head>
<body>
<h1>背景画像をスライドショー付きでフルスクリーン表示できるスクリプト「jQuery MaxImage」</h1>
<p>画像はimgタグでhtml上に配置します。オプションにより微調整が可能です。</p>
<!--表示させる画像-->
<img src="img01.jpg" alt="" class="maximg" title="画像1" />
<img src="img02.jpg" alt="" class="maximg" title="画像2" />
<img src="img03.jpg" alt="" class="maximg" title="画像3" />
<img src="img04.jpg" alt="" class="maximg" title="画像4" />
<img src="img05.jpg" alt="" class="maximg" title="画像5" />
<script>
$(function(){
jQuery('.maximg').maxImage({
isBackground: true,
slideShow: true,
slideShowTitle: true,
slideDelay: 5,
overflow: 'hidden',
verticalAlign:'top'
});
});
</script>
</body>
</html>
オプション例
スライドショーの有無【slideShow : true , false】
スライドショーのタイトルの有無【slideShowTitle : true , false】
スクロールバーの有無【overflow : true , auto , hidden】
画像の基準位置【verticalAlign : top , center , bottom】