[jquery.imgbg] 画像100%表示用プラグイン
ブラウザの横サイズ縦サイズにMAX表示させたい時に便利なプラグイン。
cssのbackgroundを利用する事が、今風なやり方ですが、レガシーのiEブラウザには対応していません。
このプラグインではIMGタグを利用することにより、IE7ブラウザなどにも対応しています。
主な特徴は、
- 上下左右100%背景画像を表示
- IE対応
- 拡大縮小する際の原点を設定できる
- オフセット値を設定できる。（ナビを常時表示させる場合などに、画像を上下左右のいずれかにオフセット値をあたえることができる）
デモ
ドキュメント準備中ですが、ざっくりこんな感じ。
デモ見てもらったほうがいいかな。
1 | // how to use // |
2 | $(function(){ |
3 | // this is default setting |
4 | $("#demo").imgbg({ |
5 | top : 0, |
6 | bottom : 0, |
7 | left : 0, |
8 | right : 0 |
9 | }); |
10 |
11 | // No1: center of images. (default setting) |
12 | $("#demo").imgbg({ |
13 | bottom : 50, |
14 | right : 100 |
15 | }); |
16 |
17 | // No1: you can set top/bottom/left/right |
18 | $("#demo").imgbg({ |
19 | top : 10, // 10px from top side |
20 | bottom : 20, // 20px from bottom side |
21 | left : 30, // 30px from left side |
22 | right : 40 // 40px from right side |
23 | }); |
24 | }); |