jQuery

【jQuery】ビューポートまたはコンテナベースの幅にマッチさせるjQuery対応の画像プラグインjQuery Responsive Image

March 17, 2018
responsive image

jQuery Responsive Imageはビューポートまたはコンテナの幅が一致するものにさせるjQuery対応のイメージプラグイン。必要とするサイズでイメージをロードすることができます。

Usage

<!-- jQuery >1.7.2 is required -->
<script src="js/jquery.min.js"></script>
<script src="../build/jquery.responsiveImage.min.js"></script>
<script>
    $(document).ready(function () {
        $('.picture').responsiveImage();
    });
</script>

markup:

<span class="picture">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg" data-min-width="600"></span>
    <span data-src="large.jpg" data-min-width="1000"></span>
</span>
<!-- Viewport Width: 0px - 599px -->
<span class="picture">
    <img src="small.jpg" alt=""/>    
</span>

<!-- Viewport Width: 600px - 999px -->
<span class="picture">
    <img src="medium.jpg" alt=""/>    
</span>

<!-- Viewport Width: >1000px -->
<span class="picture">
    <img src="large.jpg" alt=""/>    
</span>

Options

  1. source
  2. sourcePrefix
  3. container
  4. resizeEvent
  5. minWidthDefault
  6. maxWidthDefault
  7. minDprDefault
  8. attributes
  9. preload
  10. autoDpr
  11. onGetWidth
  12. onLoadSources

MIT