Data Image Delivery

Tiny jQuery plugin to deal with responsive image delivery. Think responsive.io minus the cdn.

Download (0.37kb) Image Credit - Unsplash

• Usage

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="data-img.min.js"></script>
  

  <img 
    class="data-img"
    src="http://placehold.it/1x1"
    data-sml="img/400x320.jpg"
    data-med="img/800x640.jpg"
    data-lrg="img/1000x800.jpg"
  >
  

  <div 
    class="data-img"
    style="background-image: url(http://placehold.it/1x1);"
    data-sml="img/400x320.jpg"
    data-med="img/800x640.jpg"
    data-lrg="img/1000x800.jpg"
  >
  

  $('.data-img').dataImg();

• Usage with options

  Small, Medium and Large breakpoints. Option for window resize.

  $('.data-img').dataImg({
    sml: 200,
    med: 400,
    lrg: 800,
    resize: true
  });
  

• Defaults

  $('.data-img').dataImg({
    sml: 400,
    med: 800,
    lrg: 1000,
    resize: false
  });
  

• Install with Bower

  (requires bower ~ which requires npm ~ which requires nodejs)

  bower install DataImg
  

• Configurable options:

  • sml: The breakpoint at which the small file will be shown (default = 400)
  • med: The breakpoint at which the medium file will be shown (default = 800)
  • lrg: The breakpoint at which the largest file will be shown, this size will load if screen width is above this (default = 1000)
  • resize: true/false as to whether this will work on browser resize (default = false)

• Notes

  This plugin is nothing fancy, a very simple/modest swap of 'image src' / 'background-image url' depending on screen width. Ideal for a CMS that spits out a few different sizes for you to use.

• Open

  The MIT License (MIT)

  Copyright (c) copyright Two Blokes

  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

• 
  
  View on Github