Home Development of Websites Another jQuery plugin for pixel-to-pixel layout

Another jQuery plugin for pixel-to-pixel layout

by admin

I started writing this plugin in February of this year just for myself, because at that time I hadn’t found anything similar. By now the hubraiser knows about tools like PixelPerfect and X-Precise , however, each has its pros and cons, as does mine.
So what’s so special about pixLayout?
Another jQuery plugin for pixel-to-pixel layout

  • All in one file. You plug in the jQuery, after it the plugin file, run it and everything works. Styles and html are already included.
  • Cross-browser. pixLayout works in chrome 5+, opera 10+, firefox 3.6+, IE 7+ (with some minor glitches, but still works), and all versions of jQuery starting from 1.3.2
  • Functionality. The plugin provides enough parameters for easy setup and subsequent layout.

How to install and configure?

Connect jQuery of any convenient version, starting from 1.3.2, connect pixLayout and write to it the path to the picture layout, which 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, pass an object and specify context as the second parameter.

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

Website and demo
Separate demo
The picture-layer is easy to control with the standard "w", "a", "s", "d" and arrow keys. Also, when you click on any figure in the upper row, the "step" in pixels is set equal to its value. For example: you pressed 5 – the step will be 5px. The picture can be shown or hidden by pressing shift+e.
The control panel can be attached or detached. When detached, it appears on the screen when you put the cursor to the upper right corner of the document.
Besides moving, the image layer can be centered by clicking a button in the panel and changing the "position" property to "fixed" and back to "absolute".
There is a short video describing the process :

You may also like