Lightweight jQuery Plugin For Responsive Image Delivery jPicture - Download Lightweight jQuery Plugin For Responsive Image Delivery - jPicture

Download Lightweight jQuery Plugin For Responsive Image Delivery – jPicture

By Posted on

This time I will share jQuery Plugin and tutorial about Lightweight jQuery Plugin For Responsive Image Delivery – jPicture, hope it will help you in programming stack.

Lightweight jQuery Plugin For Responsive Image Delivery jPicture - Download Lightweight jQuery Plugin For Responsive Image Delivery - jPicture
File Size: 454 KB
Views Total: 1370
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download



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.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <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

view source
01 // @param picList : object, key is url, val is width
02 // @param p1 : is either a function or an object
03 // @param p2 : function, if p1 is used it has to be a function 
04 // $.jp(picList, p1, p2) {}
05  
06 $('header').jp({
07 // imagr source, breakpoint (px)
08 'hidden' : 80,
09 'http://placehold.it/200?text=THUMB' : 200,
10 'http://placehold.it/400x300?text=SM' : 400,
11 'http://placehold.it/500x300?text=MD' : 500,
12 'http://placehold.it/600x300?text=LG' : 600
13 });

3. Add custom CSS styles.

view source
01 $('header').jp({
02     // imagr source, breakpoint (px)
03     'hidden' : 80,
04     'http://placehold.it/200?text=THUMB' : 200,
05     'http://placehold.it/400x300?text=SM' : 400,
06     'http://placehold.it/500x300?text=MD' : 500,
07     'http://placehold.it/600x300?text=LG' : 600
08 }, {
09     // custom CSS properties here
10 });

4. Callback function.

view source
01 $('header').jp({
02     // imagr source, breakpoint (px)
03     'hidden' : 80,
04     'http://placehold.it/200?text=THUMB' : 200,
05     'http://placehold.it/400x300?text=SM' : 400,
06     'http://placehold.it/500x300?text=MD' : 500,
07     'http://placehold.it/600x300?text=LG' : 600
08 }, {
09     // custom CSS properties here
10 }, function (pic) {
11     var pWidth = $(pic).width();
12     console.log("The picture has a width of " + pWidth + " pixels.");
13 });

Change logs:

v0.6.0 (2015-12-09)

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.




source : jqueryscript.net

Related posts: