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

    JavaScript

    水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」

    Timelineは水平・垂直に対応したVanilla JSを使ったタイ…

  2. Switch

    JavaScript

    iOSスタイルのシンプルなチェックボックスを実装できる「Switch」

    Switchは、シンプルでパワフルなiOSスタイルのチェックボックスを…

  3. no-image
  4. DD Scroll Boxes
  5. no-image

    JavaScript

    ミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」

    Bore Bones Sliderはミニマリスティックでフレキシブルな…

  6. simpleSlideShow

    JavaScript

    カスタマイズしやすいシンプル・軽量なスライドショー「simpleSlideShow」

    simpleSlideShowは、シンプルで軽量なスライドショーを実装…

最近の記事

  1. NIVEA MEN CREME
  2. チャイラテ
  3. ベーコンエッグアボカドトーストとゆずジンジャーアップル
  4. COMOLI ナッピングウールショーツ
  5. 川上庵(麻布十番)牡蠣天せいろ
PAGE TOP