pixLayout

pixLayout - is a jQuery plugin for per-pixel layout

DEMO

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.

Bower

# registered package
$ bower install --save pixlayout
# GitHub shorthand
$ bower install --save kudinovfedor/pixlayout
# Git endpoint
$ bower install --save git://github.com/kudinovfedor/pixlayout.git

How to start?

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.pixlayout.min.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");
});

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

Context:

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.
Example:

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

Displacement:

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

Operations:

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