jQuery Matt Glass plugin

Description

Matts Glass Plugin is an example of how to create a simple jQuery Plugin thats manipulate CSS of a HTML object. jQuery Matt Glass is a jQuery plug-in for adding Matt Glass effect to an image.

Demonstration

<p align="center">
	<img id="myPic" src="/images/christmas-small.jpg" width="256" height="192" style="border:2px solid #000"/></p>
<p align="center">
	<input type="button" value="Show Matt Glass" id="btnShow"/>
	<input type="button" value="Hide Matt Glass" id="btnHide"/>
	<input type="button" value="Remove Matt Glass" id="btnRemove"/>
</p>
<script type="text/javascript" src="/js/jquery.mattglass.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
	$("#myPic").addMattGlass();
	$("#btnShow").click(function(){
		$("#myPic").showMattGlass();
	});
	$("#btnHide").click(function(){
		$("#myPic").hideMattGlass();
	});
	$("#btnRemove").click(function(){
		$("#myPic").removeMattGlass();
	});
});
})(jQuery);
</script>

jQuery Plugin Source Code

The following is the source code of the jQuery Plugin.

<script type="text/javascript">
(function($){
	function parseCSS(obj,css){
		var r=0;
		obj.css(css).replace(/\b(\d+)px\b/,function(s,t){r=parseInt(t)});
		return r;
	}
	function MattGlass(target){
		if(target){
			var jNode=$('<div style="background-color:#FFF;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);position:absolute;z-index:900;'
				+'"></div>').appendTo("body");
			this.target=$(target);
			var w=this.target.width()+parseCSS(this.target,'borderLeftWidth')+parseCSS(this.target,'borderRightWidth');
			var h=this.target.height()+parseCSS(this.target,'borderTopWidth')+parseCSS(this.target,'borderBottomWidth');
			this.jNode=jNode.css({top:this.target.offset().top,left:this.target.offset().left,width:w+"px",height:h+"px"});
			this.target.data("MattGlass",this);
		}
	}
	MattGlass.prototype.remove=function(){
		this.jNode.remove();
	}
	MattGlass.prototype.show=function(){
		this.jNode.show();
	}
	MattGlass.prototype.hide=function(){
		this.jNode.hide();
	}
	$.fn.addMattGlass=function(){new MattGlass(this)}
	$.fn.removeMattGlass=function(){
		if(this.data("MattGlass")){
			this.data("MattGlass").remove();
		}
	}
	$.fn.showMattGlass=function(){
		if(this.data("MattGlass")) this.data("MattGlass").show()
	}
	$.fn.hideMattGlass=function(){
		if(this.data("MattGlass")) this.data("MattGlass").hide()
	}
})(jQuery);
</script>

Download the plugin

Click the link for downloading the plugin.

Copyright and licensing

All the plugin source codes and the examples are copyright of C. F., Wong
Please feel free to use any code listed in this page, they are licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php