skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

スライドショー風に背景画像を見せるJavaScript「jQuery maxImage plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

背景画像をスライドショー風に見せるとサイトが印象的に見えます。
jQuery maxImage plugin: DemoはJavaScriptによりターゲット内の画像を最大表示してくれます。
これを利用して背景画像をスライドショーにします。

使用方法
jQuery maxImage plugin: Demoからjquery.maximage.jsをjQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.maximage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.class名').maxImage({
isBackground: true,
slideShow: true,
position: 'absolute',
verticalAlign: 'bottom',
slideShowTitle: true, //タイトルを出すかどうか
slideDelay:5, //スライド間の秒数
maxFollows: 'height',
resizeMsg: {show: false}
});
});
</script>

次に画像を記述します。
<img src="loading.gif" class="loader" />
<img src="画像パス1" title="1枚目の説明" class="class名" />
<img src="画像パス2" title="2枚目の説明" class="class名" />
<!-- 以下画像分 -->
最後にCSSを記述して完成です。
.class名 { display:none; }
.loader { position:absolute;z-index:9999;width:39px;height:39px;top:49%;left:49% }

スライドショー風に背景画像を見せるJavaScript「jQuery maxImage plugin」サンプル

記事作成：2009年10月24日

前の記事：画像とテキストの組合せで見せ方を変えるJavaScript「Switch Display Optionswith CSS & jQuery」
次の記事：本をめくるように画像を表示するJavaScript「imBookFlip」