ブラウザ画面全体に画像を表示するjQueryプラグイン : jQuery
ブラウザ画面全体に画像を表示するプラグインをいくつかメモ。
- maxImage Scaling Plugin
追記 2011.12.17 新しいバージョンは下記のサイトで配布。
» MaxImage 2.0-beta1 Release | aaron vanderzwan - Supersized – Full Screen Background Slideshow jQuery Plugin
- srobbin/jquery-backstretch – GitHub
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.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。