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. Complexify

    JavaScript

    パスワードの強さを視覚的にフィードバックしてくれる「Complexify」

    Complexifyはユーザーが入力したパスワードの強さを視覚的にフィ…

  2. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

  3. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

  4. EZ Plus

    JavaScript

    タッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」

    EZ Plusはタッチにも対応した画像ズーム機能を実装することができる…

  5. Presentation Slideshow
  6. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP