Retina ready Responsive Image Plugin For jQuery - Download Retina-ready Responsive Image Plugin For jQuery

Download Retina-ready Responsive Image Plugin For jQuery

By Posted on

This time I will share jQuery Plugin and tutorial about Retina-ready Responsive Image Plugin For jQuery, hope it will help you in programming stack.

Retina ready Responsive Image Plugin For jQuery - Download Retina-ready Responsive Image Plugin For jQuery
File Size: 44.5 KB
Views Total: 1465
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Just another jQuery based retina-ready responsive image solution that helps you load in proper images dynamically for different screen sizes, depending on the viewport or parent container’s width.

Basic usage:

1. Include jQuery library and the jQuery Responsive Image plugin on the html page.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <script src="jquery.responsiveImage.js"></script>

2. Include the jQuery debouncedresize plugin to load in images dynamically once after a window resize.

view source
1 <script src="jquery.debouncedresize.js"></script>

3. Insert images with different resolutions into the container using data-src attribute. Breakpoints start from 0px to 399px, 400px to 599px, 600px to 799px, 800px to 999px and large image above 1000px.

view source
1 <span class="picture" data-alt="foo" data-title="bar" data-class="img-responsive">
2   <span data-src="400x200.jpg"></span>
3   <span data-src="600x300.jpg" data-min-width="400"></span>
4   <span data-src="800x400.jpg" data-min-width="600"></span>
5   <span data-src="1000x500.jpg" data-min-width="800"></span>
6   <span data-src="1200x600.jpg" data-min-width="1000"></span>
7 </span>

4. Initialize the responsive image plugin.

view source
1 $('.picture').responsiveImage();

5. Default settings.

view source
01 $('.picture').responsiveImage({
02  
03   // The jQuery selector for source elements.
04   source:             '> span',
05  
06   // A prefix for every(!) source element.
07   // Might be the default URL to the asset folder or a CDN so the source element only needs the relative path to the specific image.
08   sourcePrefix:       '',
09  
10   // A default container element that defines the size for the responsive image to be loaded.
11   // You can aslo pass the option via data-attribute, e.g. data-container="figure"
12   container:          null,
13  
14   // These attributes are set to the generated responsive image tag.
15   attributes:         ['title', 'alt', 'class', 'width', 'height'],
16  
17   // Detect the resize of the viewport.
18   // You can set any event that can be used inside jQuery's .on() function.
19   // Set resizeEvent to empty string to disable image calculation on resize.
20   resizeEvent:       'resize',
21  
22   // Preload images before loading them into the DOM.
23   preload:            false,
24  
25   // Automatically include dpr on best fit width calculation.
26   autoDpr:            false,
27  
28   // The viewport and the container width are calculated automatically.
29   // The callback function can be used for any custom width calculation.
30   // Inside this function you can use the plugins' context.
31   onGetWidth:         null,
32  
33   // The minimum width that is used, if no data-min-width was set.
34   minWidthDefault:    0,
35  
36   // The maximum width that is used, if no data-max-width was set.
37   maxWidthDefault:    Number.MAX_VALUE,
38  
39   // The minimum device pixel ratio that is used if no data-min-dpr was set.
40   // If you want to show only Retina images set this value to 2
41   minDprDefault:      1
42  
43   // The viewport and the container width are calculated automatically.
44   // The callback function can be used for any custom width calculation.
45   // Inside this function you can use the plugins' context.
46   onGetWidth:         null,
47  
48   // This callback function can be used to completely overwrite the source loading process.
49   onLoadSources:      null
50  
51 });

6. Events.

  • ready.responsiveImage: fires when the responsive image was initially loaded, fires only once  
  • all.ready.responsiveImage: fires when all responsive images were initially loaded, fires only once
  • new.source.responsiveImage: fires when the image was inserted into the DOM
  • load.source.responsiveImage: fires when the image source was loaded

Changelog:

v1.6.0 (2018-09-18)

  • added image load error handling and documented optional <img> tag as fallback

v1.5.0 (2017-12-03)

  • added load.responsiveImage event listener

v1.4.3 (2017-09-26)

  • removed off() from image load

v1.4.1 (2016-04-06)

  • fixed min-dpr result to 1 because of lower dpr values on zoomed sites

v1.4.0 (2016-02-10)

  • added sourcePrefix option

v1.3.1 (2016-02-01)

  • added option to disable resize event

2015-12-10

  • added events for ready, all.ready
  • added load event to newly created image

2015-07-06

  • refactored attribute injection to be configurable

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

source : jquery.net

Related posts: