Smart Cross platform Image Delivery Plugin smart images - Download Smart Cross-platform Image Delivery Plugin - smart_images

Download Smart Cross-platform Image Delivery Plugin – smart_images

By Posted on

This time I will share jQuery Plugin and tutorial about Smart Cross-platform Image Delivery Plugin – smart_images, hope it will help you in programming stack.

Smart Cross platform Image Delivery Plugin smart images - Download Smart Cross-platform Image Delivery Plugin - smart_images
File Size: 6.56 MB
Views Total: 743
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Yet another smart Image Delivery plugin for jQuery that automatically updates the src of an img tag and pulls in the image appropriate to the current window width.

Dependencies:

  • jQuery.
  • BreakpointX: Define responsive breakpoints, register callbacks when crossing, with optional css class handling.

Installation:

view source
1 # Yarn
2 $ yarn add @aklump/smart-images
3  
4 # NPM
5 $ npm install @aklump/smart-images --save

How to use it:

1. Include the needed JavaScript file as noticed above in your html document.

view source
1 <script src="/path/to/jquery.min.js"></script>
2 <script src="/path/to/BreakpointX.js"></script>

2. Download and include the jQuery smart_images plugin after jQuery.

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

3. The markup.

  • You MUST have at least two image paths defined based on a media query regarding a screen width.
  • You MUST have only one min-width declaration and it needs to be 1px greater than your highest max-width declaration.
  • You MAY have as many max-width declarations as you want breakpoints.
  • Each max-width tag MUST define a path to an image the SHOULD be the same width as the max-width value.
  • The single min-width tag MUST define a path to the largest image you want to load and it SHOULD be larger than the min-width value, e.g., if min-width=769 the image may be 1080px wide.
view source
1 <div class="smart-image">
2   <span data-si-srcset="small.jpg" data-si-media="(max-width: 319px)"></span>
3   <span data-si-srcset="medium.jpg" data-si-media="(max-width: 479px)"></span>
4   <span data-si-srcset="large.jpg" data-si-media="(max-width: 767px)"></span>
5   <span data-si-srcset="full.jpg" data-si-media="(min-width: 768px)"></span>
6   <img/>
7 </div>

4. Initialize the plugin on document ready and we’re done.

view source
1 $('.smart-image').smartImages();

5. To get the SmartImages object after it’s attached you can do this:

view source
1 var smartImages = $('.smart-image').data('smartImages');

6. Possible plugin settings with default values.

view source
01 /**
02  * Namespace for all data tags, e.g. 'si-'.
03  */
04 dataPrefix     : 'si-',
05 dataSrcSuffix  : 'srcset',
06 dataMediaSuffix: 'media',
07  
08 /**
09  * Used with $el.find() to locate the img tag that gets replaced with src.
10  */
11 imgSelector: 'img',
12  
13 /**
14  * Used with $el.find() to locate the tags that contain the srcsets. By default this is null because it uses the
15  * data suffixes above, but setting it here will override that behavior.  This would allow you to use an alternate
16  * structure if necessary.
17  */
18 srcSelector: null,
19  
20 /**
21  * How many milliseconds to wait to read the window width after a resize event.
22  */
23 resizeThrottle: 300,
24  
25 /**
26  * This setting answers the question of loading smaller images when the window downsizes.
27  *
28  * 'never' means the largest image that gets loaded first will always show.  Use this method to reduce bandwidth,
29  * and if aspect ratios are the same across breakpoints.  THIS IS THE FASTEST AND USES THE LEAST BANDWIDTH.
30  *
31  * Setting this to 'always' will mean that the images are swapped BOTH when the window grows larger and grows
32  * smaller and results in more data transfer when the window starts out larger because the smaller images need to
33  * be downloaded.  One reason to choose this setting is if the aspect ratios are different for different
34  * breakpoints--to ensure images don't distort.  USE THIS OPTION IF ASPECT RATIOS ARE DIFFERENT ACROSS BREAKPOINTS.
35  *
36  * 'loaded' means smaller images will be shown if they were previously loaded.  This happens when the window starts
37  * out small, grows larger, then shrinks back.  This option may give better visual appearance because the browser
38  * is not resizing the image.  Compared to 'never' this results in a slight delay as the window grows larger, and
39  * the image needs to be swapped out for the larger. USE THIS OPTION IF YOU NOTICE SMALLER IMAGES ARE NOT AS CLEAR
40  * AS YOU WANT.
41  *
42  * One of:
43  * - never
44  * - always
45  * - loaded
46  */
47 downsize: 'never',
48  
49 /**
50  * Callback fired on initializing before loading the first images.
51  */
52 onInit: null,
53  
54 /**
55  * Callback before a src change is to occur.  Only the first time this is called will this.firstRun be true.
56  *
57  * Return false to prevent the image src swap.
58  *
59  * @param string breakpoint name
60  * @param string image src
61  */
62 onBeforeChange: null,
63  
64 /**
65   source : jquery.net

Related posts: