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. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

  2. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

  3. Parallaxor

    JavaScript

    美しいパララックス効果を最小限のコードで実装できるjQueryプラグイン「Parallaxor」

    Parallaxorは最小限のミニマルなコードで美しいパララックス効果…

  4. ReadRemaining.js

    JavaScript

    記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」

    ReadRemaining.jsは記事を読むのにどのくらい時間がかかる…

  5. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  6. Uglipop.js

    JavaScript

    軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」

    Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダル…

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP