pixLayout — is a jQuery plugin for per-pixel layout

While websites layouting an exact resemblance with model is required. Sometimes this is required by customer, sometimes by superior, and sometimes you want strictly fit the design, but moreover, sometimes per-pixel equivalence is a necessary thing.
pixLayout was created to facilitate maximally the work of the pixel layout designer and measuring distances and margins.
pixLayout is a picture-layer, which can be managed by the panel at the top right corner of the document window, hotkeys, or just by moving it with the mouse. At any time, the panel can be hidden or completely liquidate the whole html and css of the plugin.
For dynamic layout adjusting is very convenient to use the Developer Tools in Chrome or FireBug in Firefox.

Pixlayout advantages over other similar plug-ins and add-ons:

1. Not only works in one browser. As pixLayout is a javascript-code it's enough to include it to head and it will work in all supported browsers. After the end of layout you can merely disconnect the plugin.
2. Functionality. Plugin provides all necessary functions and settings for convenient picture-layer control.
3. Crossbrowsering and crossversioning. pixLayout works in browsers chrome5+, opera 11+, firefox 3,6+, IE 7+, as well as on all versions of jQuery beginning from the 1.3.2.
4. All in one file. In contrast to many plugins, which include besides js-code, and even style files, and frequently pictures, pixLayout consists of a single file in which all the components are already embedded.
5. Free of charge and permanent project development. Plugin is spreaded absolutely free under license GPL 2 and constantly evolves.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pixlayout.js"></script>
<script type="text/javascript">
	$(function(){
		$.pixlayout("/path_to_picture/picture.ext");
	});
</script>
							

Some parameters transmission and context example:

$(function(){
	$.pixlayout({
		src: "/img/layout.jpg",
		opacity: 0.8,
		top: 50,
		center: true,
		clip: true,
		show: true
	}, ".wrapper");
});
							

$.pixlayout("img/picture.png", "div.wrapper");