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 its 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.


0.9.7 (2012-10-11)
  • weve added property previous that makes the layer picture flow-through (this function is not supported in IE<9)
  • the design of the checkboxes has been changed
  • the option of value change of inputs during scrolling has been added
  • the bug with the recall of methods during dynamical change of src picture has been fixed

0.9.6 (2012-09-23)
  • compressed version is added
  • context is added
  • syntax is fixed
  • the bug is fixed, when the image size reseted to zero while moving it in a hidden form
  • the bug is fixed with inability to align while image creating

0.9.5 (2012-08-07)
  • shift+e now works even if the picture does not exist yet
  • some layout bugs are fixed
  • the bug of inability to show the picture is fixed, if at the time of the call it was not loaded
  • the bug with NaN options left and right when loading is fixed
  • new 'show' parameter which allows to show image-layer immediately is added

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pixlayout.js"></script>
<script type="text/javascript">

Some parameters transmission and context example:

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

Parameter Type Possible values Description
1. src string way to the picture-layer way to the picture-layer
2. opacity float 0.0 - 1.0 opacity
3. step integer from 1 to infinity step moving image in pixels
4. top, left, right integer from 1 to infinity indention in pixels
5. zindex integer from 1 to infinity picture-layer location on the axis z
6. clip boolean true or false panel fixed or not
7. center boolean true or false picture in the center or not
8. fixed boolean true or false picture position is fixed or not
9. show boolean true or false show the picture when loading or not


You can specify any element on the page as the context and the picture-layer will add to the end of this element. By default, such an element is body.
Context is specified as the second parameter.

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


  1. buttons:'left', 'right', 'down'
  2. buttons:w,a,s,d, when the picture is visible
  3. navigation buttons


  1. Destroy (remove all html and css code pixLayout from the page) the 'x' in the upper right corner.
  2. Secure the panel the icon in the upper right corner of the panel
  3. Quick reference: the question mark in the upper right corner of the panel
  4. To roll up settings arrow 'up' downwards of the panel
  5. Show/hide the picture the center button of the navigation bar or shift+e