jQueryのプラグイン作成に、fn.extend()を使います。
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.
https://api.jquery.com/jquery.fn.extend/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery plugin</title>
</head>
<body>
<p><img src="image01.jpg"></p>
<p><img src="image02.jpg"></p>
<p><img src="image03.jpg"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.showsize.js"></script>
<script>
$(function(){
$('img').showsize({
size: 22,
opacity: 0.9
});
});
</script>
</body>
</html>
;(function($){
$.fn.showsize = function(options){
var elements = this;
elements.each(function(){
var opts = $.extend({}, $.fn.showsize.defaults, options, $(this).data());
$(this).click(function(){
var msg = $(this).width() + ' x ' + $(this).height();
$(this).wrap('<div style="position:relative;"></div>');
var div = $('<div>')
.text(msg)
.css('position', 'absolute')
.css('top', '0')
.css('padding', '2px')
.css('background', getRandomColor())
.css('font-size', opts.size +'px')
.css('color','white')
.css('opacity',opts.opacity);
$(this).after(div);
});
});
return this;
};
function getRandomColor(){
var colors = ['red', 'pink', 'orange', 'green', 'blue'];
return colors[Math.floor(Math.random()* colors.length)];
}
$.fn.showsize.defaults = {
size: 10,
opacity: 0.8
};
})(jQuery);
