Created
May 5, 2017 09:07
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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