[jquery.imgbg] 画像100%表示用プラグイン

by codechord. 0 Comments

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

ブラウザの横サイズ縦サイズにMAX表示させたい時に便利なプラグイン。

ダウンロードはgithubから

cssのbackgroundを利用する事が、今風なやり方ですが、レガシーのiEブラウザには対応していません。
このプラグインではIMGタグを利用することにより、IE7ブラウザなどにも対応しています。

主な特徴は、

  • 上下左右100%背景画像を表示
  • IE対応
  • 拡大縮小する際の原点を設定できる
  • オフセット値を設定できる。(ナビを常時表示させる場合などに、画像を上下左右のいずれかにオフセット値をあたえることができる)

デモ

githubにコードを置いています。

ドキュメント準備中ですが、ざっくりこんな感じ。
デモ見てもらったほうがいいかな。


// how to use //
$(function(){
  // this is default setting
  $("#demo").imgbg({
    top    : 0,
    bottom : 0,
    left   : 0,
    right  : 0
  });

  // No1: center of images. (default setting)
  $("#demo").imgbg({
    bottom : 50,
    right  : 100
  });

  // No1: you can set top/bottom/left/right
  $("#demo").imgbg({
    top    : 10,    // 10px from top side
    bottom : 20,    // 20px from bottom side
    left   : 30,    // 30px from left side
    right  : 40    // 40px from right side
  });
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>