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
});

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

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

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

要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpeed」前のページ

自由なサイズやカラー指定でダミー画像を生成できる「PLACEHOLD.IT」次のページ

関連記事

  1. jquery.confirmDialog
  2. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

  3. Chocolat

    JavaScript

    レスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」

    Chocolatはレスポンシブに対応したシンプルでスタイリッシュなLi…

  4. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

  5. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP