Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Simple jQuery powered function to enable responsive images
JavaScript
Branch: master

bower

latest commit aea3a428ef
smasala authored
Failed to load latest commit information.
.settings v1.0.2
dist v1.0.3
src v1.0.3
tools v1.0.2
LICENSE Initial commit
README.md Update README.md
bower.json bower
release-changeset release notes

README.md

Responsive Images JS

Simple jQuery powered function to enable responsive images

Tested with jQuery 2.x, however I don't see why it shouldn't work on earlier versions. Feel free to test and let me know.

Usage

Couldn't be any easy to use (sizes from largest to smallest)

<img    data-sizes="xl, l, m, s, xs" 
        data-srcset="
                http://placehold.it/500x400&text=xl,
                http://placehold.it/400x300&text=l,
                http://placehold.it/300x200&text=m,
                http://placehold.it/200x150&text=s,
                http://placehold.it/150x100&text=xs
            "
/>
  • data-sizes: allows predefined sizes or actual css media queries.
  • data-srcset: comma separated urls that are to be used in the same order as data-sizes

Current predefined sizes:

    xs:"only screen and (max-width : 480px)",
    s:"only screen and (min-width : 481px)",
    m:"only screen and (min-width : 768px)",
    l:"only screen and (min-width : 1280px)",
    xl:"only screen and (min-width : 1921px)"

Demo

Contribution

Feel free to contribute to this project and send me any pull request. Perhaps performance improvements, debate defaults screen sizes or even port a version that doesn't require jQuery!

Licence

MIT

Something went wrong with that request. Please try again.