てるてるブログ

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

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

Posted on | 7月 23, 2010 | 1 Comment&trackback

背景画像を画面サイズに合わせて最適化してくれる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

One Response to “背景画像のスライドショー「jQuery maxImage plugin」”

  • 95Kelley
    8月 13th, 2017 @ 8:00 AM

    Hello admin, i must say you have hi quality posts here.

    Your page should go viral. You need initial traffic boost only.
    How to get it? Search for; Mertiso’s tips go viral

Leave a Reply





*

About

てるぼうず

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

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

Admin