Slide 1
Slide 1 text
DIY: Build a jQuery
Plugin!
with Phil Dutson (@dutsonpa)
Slide 2
Slide 2 text
Phil Dutson
• Solution Architect for ICON
Health & Fitness
• Author of:
- Sam’s Teach Yourself jQuery Mobile
in 24 Hours
- jQuery, jQuery UI, and jQuery
Mobile: Recipes and Examples
- Android Developers Cookbook (2nd
edition)
- Responsive Mobile Design:
Designing for Every Device
Slide 3
Slide 3 text
The Problem
Dealing with responsive images in responsive/adaptive
web design
Slide 4
Slide 4 text
Responsive images
• Art direction
• Speed and payload
• Supporting the internet of things
Slide 5
Slide 5 text
Art Direction
• The perfect image for 1920x1080 is usually not the
perfect image for 320x568
• You can make the browser scale, but, you really
shouldn’t make the browser scale
• Either sell the lifestyle, or sell the product
Slide 6
Slide 6 text
Device mocks from https://dribbble.com/shots/988673-Flat-Devices
Slide 7
Slide 7 text
Speed and Payload
• Increase site “time to usable” by deferring blocking
resources (but think intrinsically with images!)
• Deliver images that the device making the request
can use
Slide 8
Slide 8 text
The Internet of Things
• Not every device has a high pixel density display
• Not all high pixel density displays are the same
(some devices have 1.5x, 2x, or even 3x)
• Strike a balance between image size and device
capability (if 1.5x images will work, use them to
save on file size)
Slide 9
Slide 9 text
There is no possible way this
projector is going to accurately
show you pixel density differences
between any sample images
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
To see the difference…
• Get a 2x device (iPhone4+, MotoX…)
• Get a 1x device (*book, non-retina MBP)
• Go to http://labs.devcannon.com/pixeldensity/
• Don’t know your device pixel density is? Go to
http://www.mobiledesignrecipes.com/device-statistics/
Slide 12
Slide 12 text
The Solution
Server, Markup, or a little JavaScript
Slide 13
Slide 13 text
Server Solution
• Use server side scripting to resize and serve
images
• Install or compile a third-party module on your
Nginx or Apache server (e.g. mod_pagespeed)
• Toss your shared hosting solution for a dedicated
or cloud solution that gives you full control over
your server (wink wink: https://
www.digitalocean.com/?refcode=6b2fe9c26ff1)
Slide 14
Slide 14 text
Markup Solution
• Use the picture element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/
embedded-content.html#embedded-content
• Supported on Chrome 38+, Opera 24+, Firefox 33+
• Use srcset property in images
• http://www.whatwg.org/specs/web-apps/current-work/multipage/
embedded-content.html#attr-img-srcset
• Supported on Chrome 34+, Opera 23+, Chrome for Android 36+
Slide 15
Slide 15 text
JavaScript Solution
• Javascript allows us to programmatically choose
what our users will end up viewing
• Customizable solution for the madness that the
Marketing department will eventually require
• Using data-attributes allows us to get information
into the plugin
Slide 16
Slide 16 text
Sample Element Using
Data-Attributes
Slide 17
Slide 17 text
function pixity(imgClass, limitSm, limitMd, limitLg) {
// set defaults
if (imgClass === undefined) { imgClass = "pixity"; }
if (limitSm === undefined) { limitSm = 480; }
if (limitMd === undefined) { limitMd = 768; }
if (limitLg === undefined) { limitLg = 960; }
var cw = document.documentElement.clientWidth, domNode = $("." + imgClass);
function imgSm(domNode) {!
domNode.each(function () {!
var $this = $(this);!
$this.attr('src', $this.data('path') + '/' + $this.data('sm'));!
});!
}!
function imgMd(domNode) {!
domNode.each(function () {!
var $this = $(this);!
$this.attr('src', $this.data('path') + '/' + $this.data('md'));!
});!
}!
function imgLg(domNode) {!
domNode.each(function () {!
var $this = $(this);!
$this.attr('src', $this.data('path') + '/' + $this.data('lg'));!
});!
}!
function imgXl(domNode) {!
domNode.each(function () {!
var $this = $(this);!
$this.attr('src', $this.data('path') + '/' + $this.data('xl'));!
});!
}!
!
if (cw <= limitSm) {
imgSm(domNode);
} else if (cw <= limitMd) {
imgMd(domNode);
} else if (cw <= limitLg) {
imgLg(domNode);
} else {
imgXl(domNode);
}
}
Slide 18
Slide 18 text
Building the Plugin
function(); to $.function();
Slide 19
Slide 19 text
Plugin Template
;(function($){
$.fn.functionNameHere = function(options) {
var settings = $.extend({/*defaults here*/},options);
// globals here
// functions here
!
// execute here
}
})(jQuery);
Slide 20
Slide 20 text
Adding default values
;(function($){
$.fn.pixity = function(options) {
var settings = $.extend({
imgClass: 'pixity',!
limitSm: 479,!
limitMd: 767,!
limitLg: 959!
},options);
…
})(jQuery);
Slide 21
Slide 21 text
Adding Variables
;(function($){
$.pixity = function(options) {
...
// globals here
var domNode = $('.'+settings.imgClass);!
var cw = document.documentElement.clientWidth;!
// functions (as vars) here
var imgSm = function() {!
domNode.each(function() {!
var $this = $(this);!
$this.attr('src',$this.data('path') +'/'+$this.data('sm'));!
});!
};!
!
...
}
})(jQuery);
Slide 22
Slide 22 text
Adding Execution Logic
;(function($){
$.pixity = function(options) {
...
!
// execute here
if (cw <= settings.limitSm) {!
imgSm();!
} else if (cw <= settings.limitMd) {!
imgMd();!
} else if (cw <= settings.limitLg) {!
imgLg();!
} else {!
imgXl();!
}!
}
})(jQuery);
Slide 23
Slide 23 text
Adding and Calling the
Plugin
Call the plugin through an href or onclick:
Trigger Pixity!
!
Or you can place the call inside of .ready():
!
$(document).ready(function() {
$.pixity();
});
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Learn More!
• Official jQuery plugin docs (http://learn.jquery.com/
plugins/)
• Scott Jehl Picturefill (http://scottjehl.github.io/
picturefill/)
• Responsive Image Community Group (http://
responsiveimages.org/)
• jQuery plugin repository (http://plugins.jquery.com/)
Slide 26
Slide 26 text
Thank You!
Questions, comments, and the like can be
asked and answered by stalking me online:
!
+Phil Dutson!
@dutsonpa
Pixity Core on GitHub:
https://github.com/dutsonpa/pixity