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.
Download:
jQuery.pixlayout v. 0.9.8
jQuery.pixlayout v. 0.9.8 pack
<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>
$(function(){ $.pixlayout({ 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.
Example:
$.pixlayout("img/picture.png", "div.wrapper");