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.
Ќапример:
$.pixlayout("img/picture.png", "div.wrapper");