Lightweight jQuery Plugin For Responsive Image Delivery - jPicture

jPicture is a simple lightweight (~2kb) jQuery plugin that delivers your background images at the correct pixel resolution depending on screen width.

How to use it:

1. Download and include the jPicture jQuery plugin in your webpage which has jQuery library included.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jpicture-0.3.3.min.js"></script>

2. Call the function on the target container and specify a list of background images at different resolutions

// @param picList : object, key is url, val is width
// @param p1 : is either a function or an object
// @param p2 : function, if p1 is used it has to be a function  
// $.jp(picList, p1, p2) {}

$('header').jp({
// imagr source, breakpoint (px)
'hidden' : 80, 
'http://placehold.it/200?text=THUMB' : 200, 
'http://placehold.it/400x300?text=SM' : 400, 
'http://placehold.it/500x300?text=MD' : 500, 
'http://placehold.it/600x300?text=LG' : 600
});

3. Add custom CSS styles.

$('header').jp({
    // imagr source, breakpoint (px)
    'hidden' : 80, 
    'http://placehold.it/200?text=THUMB' : 200, 
    'http://placehold.it/400x300?text=SM' : 400, 
    'http://placehold.it/500x300?text=MD' : 500, 
    'http://placehold.it/600x300?text=LG' : 600
}, { 
    // custom CSS properties here
});

4. Callback function.

$('header').jp({
    // imagr source, breakpoint (px)
    'hidden' : 80, 
    'http://placehold.it/200?text=THUMB' : 200, 
    'http://placehold.it/400x300?text=SM' : 400, 
    'http://placehold.it/500x300?text=MD' : 500, 
    'http://placehold.it/600x300?text=LG' : 600
}, { 
    // custom CSS properties here
}, function (pic) {
    var pWidth = $(pic).width();
    console.log("The picture has a width of " + pWidth + " pixels.");
});

Change logs:

v0.6.0 (2015-12-09)

• JS update.

v0.5.0 (2015-10-20)

• JS update.

v0.4.0 (2015-08-06)

• minor fixes

v0.3.5 (2015-07-05)

• Added a new function to handle html and changed jquery resize to pure javascript

---

This awesome jQuery plugin is developed by oliver-j. For more Advanced Usages, please check the demo page or visit the official website.