ブラウザ画面全体に画像を表示するjQueryプラグイン : jQuery

Pocket

ブラウザ画面全体に画像を表示するプラグインをいくつかメモ。

maxImage Scaling Plugin

maxImage Scaling Pluginのメモ。maxImage Scaling Pluginはスライド機能を持つ。

画像をスライドする方法の解説記事。
» Scaling Background Slideshow > maxImage Scaling Plugin

簡単な例

<head>
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
<script type="text/javascript>
jQuery('img.slidemaximage').maxImage({
    isBackground: true,
    slideShow: true,
    slideShowTitle: true,
    slideDelay: 5,
    maxFollows: 'height',
    resizeMsg: {show: false}
});
</script>
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
<style>
	img.slidemaximage {position:fixed !important;}
</style>
</head>
<img src="example1.jpg" alt="" title="Info 1" class="slidemaximage" style="display: none;" />
<img src="example2.jpg" alt="" title="Info 2" class="slidemaximage" style="display: none;" />
<img src="example3.jpg" alt="" title="Info 3" class="slidemaximage" style="display: none;" />

(1) スタイルstyle="display: none;"は必須[1]
(2) CSSでスクロールバーを消す(2012.01.09)。
img.slidemaximage {position:fixed !important;}
» クリエイティブデイズ。: 「maxImage」 – 画面にあわせて背景画像のサイズを自動調節

コールバック関数の設定

maxImage Scaling Pluginは画像(example1.jpg〜example3.jpg)の読み込みを完了して画像を表示する際に呼ばれる処理をコールバック関数として指定できる。
下記の例では非表示要素をコールバック関数で表示する。

#header h1 {
    visibility: hidden;
}
#sidebar {
    visibility: hidden;
}
 jQuery('img.slidemaximage').maxImage({
    isBackground: true,
    slideShow: true,
    slideShowTitle: true,
    slideDelay: 5,
    maxFollows: 'height',
    resizeMsg: {show: false},
    onImageShow: function () {  
        $('#header h1').css('visibility', 'visible');
        $('#sidebar').css('visibility', 'visible');
    }
});

[1] Scaling Background Slideshow > maxImage Scaling Pluginの解説はdisplay: none;を明示的に書いていないが記事のスタイルシートではスライドする画像に設定したクラス(本記事ではslidemaximage)にdisplay: noneを指定している。

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 


人気記事 はてなブックマーク

この日記のはてなブックマーク数