てるてるブログ

てるてるぼうずの日常やらお勉強やら

背景画像のスライドショー「jQuery maxImage plugin」

Posted on | 7月 23, 2010 | No Comments

背景画像を画面サイズに合わせて最適化してくれるjQueryのプラグイン「maxImage」。
要素をコントロールすることで、背景画像をスライドショー風にすることもできます。

まずはjQueryからjquery.jsをダウンロード。
maxImage Scaling Pluginのリンク先からjquery.maximage.jsをダウンロード。

Fladhでも出来そうですが、簡単に画像とHTMLだけで動きのついたページが作れるのはいいですよね。

サンプルページ

↓に設置法などメモ。


headタグ内に↓。

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery.maximage.js" type="text/javascript"></script>
<script type="text/javascript"></script>

↑だけで背景画像の画面サイズの最適化はできます。
画像をスライドショーさせようと思ったらscript内を下記に変更。

$(document).ready(function(){
$('画像のクラス名').maxImage({
isBackground: true,
slideShow: true,
position: 'absolute',
verticalAlign: 'bottom',
slideShowTitle: true, //タイトルの有無
slideDelay:5, //スライドの秒数
maxFollows: 'height',
resizeMsg: {show: false}
});
});

html内のimgタグにクラス名を指定。

<img class="loader" src="img/loading.gif" alt="" />
<img class="クラス名" title="1枚目" src="img/01.jpg" alt="" />
<img class="クラス名" title="2枚目" src="img/02.jpg" alt="" />

クラスの指定はこんな感じで↓。

.クラス名{
display:none;
}
.loader {
position:absolute;
z-index:9999;
width:100px;
height:25px;
top:49%;
left:48%
}
トラックバックURL:

Comments

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin