Data Img

JavaScript

ブラウザ幅に応じて画像を切り替えれるレスポンシブ対応のjQueryプラグイン「Data Img」

Data Imgはブラウザ幅に応じて最適なサイズの画像を切り替えて表示させることができるレスポンシブに対応したjQueryプラグインです。単純に1枚の画像サイズが縮まるのではなく別の画像が表示されるので、使い方次第では非常に便利なプラグインです。

[ads_center]

Data Imgの使い方

Data Img

Data Img

jQueryとData Imgを読み込んだら、こんな感じで画像をマークアップします。

<img
    class="data-img"
    src="sample.jpg"
    data-sml="img/400x320.jpg"
    data-med="img/800x640.jpg"
    data-lrg="img/1000x800.jpg"
>

data-×××に各サイズの画像を指定していきます。sml、med、lrgに小、中、大といった画像を入れていけばOKです。

最後にData Imgを呼び出します。

$('.data-img').dataImg();

これでブラウザ幅に応じて設定したサイズの画像が表示されます。

ブレイクポイントはオプションで以下のように設定することができます。下記の値はデフォルト値になります。

$('.data-img').dataImg({
    sml: 400,
    med: 800,
    lrg: 1000,
    resize: false
});

通常のレスポンシブだと画像が縮小されるだけなので、画像によっては何が書かれているのか見えづらくなってしまう場合があります。

そういった時にこのプラグインを使えば、画像自体をスマホに合わせたものに入れ替えたりといったことができるので、閲覧性の向上も期待できますね。

ブラウザ幅に合わせて画像を上手く使い分けていきたい時に活用されてみてはいかがでしょうか?

関連記事

  1. JavaScript

    クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」

    Purplecoat.jsはクリックすると画像や好きな要素にオーバーレ…

  2. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  3. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  5. no-image

    JavaScript

    ミニマルなイメージギャラリーを実装できる「Albery」

    Alberyはミニマルなイメージギャラリーを実装できるjQueryプラ…

  6. stickyNavbar.js

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP