Skip to content

Instantly share code, notes, and snippets.

@sveetch
Created May 5, 2017 09:07
Show Gist options
  • Save sveetch/0fa69c6717b19823d49e8478f13c2862 to your computer and use it in GitHub Desktop.
Save sveetch/0fa69c6717b19823d49e8478f13c2862 to your computer and use it in GitHub Desktop.
jQuery plugin to transform every <img> source to a fpoimg url with original natural image dimensions
/*
* jQuery plugin to transform every <img> source to a fpoimg url with original
* natural image dimensions, this won't work with SVG images nor background
* images.
*
* You should instanciate this plugin before everything else that manipulate
* images.
*
* Usage exemple:
*
* $('body').fpoimg();
*
* You may use another selector to apply this plugin on more precise container.
*
*/
(function ( $ ) {
// adds .naturalWidth() and .naturalHeight() methods to jQuery
// for retreaving a normalized naturalWidth and naturalHeight.
// Stealed from :
// http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/
var props = ['Width', 'Height'],
prop;
while (prop = props.pop()) {
(function (natural, prop) {
$.fn[natural] = (natural in new Image()) ?
function () {
return this[0][natural];
} :
function () {
var
node = this[0],
img,
value;
if (node.tagName.toLowerCase() === 'img') {
img = new Image();
img.src = node.src,
value = img[prop];
}
return value;
};
}('natural' + prop, prop.toLowerCase()));
};
// Shortcut for String.endswith behavior
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
/*
* Plugin extensions calling logic
*/
$.fn.fpoimg = function(method) {
// Specific public method called
if ( extensions[method] ) {
return extensions[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
// Default public method to init the plugin
} else if ( typeof method === 'object' || ! method ) {
return extensions.init.apply( this, arguments );
// Unknow called method
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.fpoimg' );
}
};
/*
* Plugin extension methods
*/
var extensions = {
/*
* Initialize plugin, default public method, must be called first
*/
init : function(options) {
return this.each(function() {
var $this = $(this);
//
// Attempt to fpoimg'ize every image
$('img').each(function() {
var $image = $(this),
width = $image.naturalWidth(),
height = $image.naturalHeight(),
url = $image.attr('src'),
newurl;
// Dont proceed on SVG images since their original cant be
// easily retrieved
if(url && !endsWith(url, '.svg')){
//console.log("%s: %s x %s", url, width, height);
// Build fpoimg url
newurl = "http://fpoimg.com/" + width + "x" + height;
//console.log("To: %s", newurl);
$image.attr('src', newurl);
$image.attr('data-fpoimg-original', url);
}
});
});
}
};
}( jQuery ));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment