jQuery

【jQuery】ウィンドウサイズを検出し、適切なイメージを選択する jQuery Image Responsive

August 8, 2018
jquery-image-responsive

jQuery Image ResponsiveはjQueryを使用してウィンドウサイズを検出し、適切なイメージを選択する軽量のプラグイン。

How to use

イメージ

<img data-src-lg="images/banner-lg.png" 
    data-src-md="images/banner-md.png" 
    data-src-sm="images/banner-sm.png" 
    data-src-xs="images/banner-xs.png" 
    data-src="images/banner.png" 
    class="responsive" />

レスポンシブさせる画像を選択する

$(function () {
    $("img.responsive").responsive();
});

Configuration

$("img.responsive").responsive({
    lgSize: 1200,
    mdSize: 992,
    smSize: 768,
    xsSize: 576,
    lgName: "data-src-lg",
    mdName: "data-src-md",
    smName: "data-src-sm",
    xsName: "data-src-xs",
    defaultName: "data-src",
    applyAbove: true,
    applyBelow: false,
    applyDefault: true
});
  1. lgSize, mdSize, smSize, xsSize
  2. lgName, mdName, smName, xsName
  3. applyAbove
  4. applyBelow
  5. applyDefault