Another jQuery plugin for pixel-to-pixel layout

I started writing this plugin in February of this year just for myself, because at that time I did not find anything like it. Now Habrayuser is aware of such tools as PixelPerfect and X-Precise , but each of them has its pros and cons, like mine.

So, what's special about pixLayout?

• All in one file. You connect jQuery, after it the plugin file, launch it and everything works. Styles and html are already included.
• Cross-browser compatibility. pixLayout works in chrome 5+, opera 10+, firefox 3.6+, IE 7+ browsers (with small glitches, but it still works), as well as on all versions of jQuery since 1.3.2
• Functionality. The plugin provides enough parameters for easy configuration and subsequent layout.

How to install and configure?

')
We connect jQuery of any convenient version, starting from 1.3.2, connect pixLayout and set the path to the image layout that we previously created.

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

For more fine-tuning, we pass the object and specify the context as the second parameter.

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

Site and demo
Separately demo

It is convenient to control the hotkeys with the picture layer — standard “w”, “a”, “s”, “d” and arrows. Also, when you click on any digit from the top row, a “step” is set in pixels equal to its value. For example: clicked 5 - the step will be 5px. You can hide and show the picture using shift + e.
The control panel is able to fasten and undo. In the detached state appears on the screen when you hover the cursor on the upper right corner of the document.
In addition to moving, the picture-layer can center on pressing a single button on the panel and change the “position” property to “fixed” and back to “absolute”.

There is a short video describing the process: