Get it from github through git
git clone git://github.com/sebastiandeutsch/smile-designer-smile.git
Just DOUBLE CLICK on the screen and the underlaying layout will be displayed opaque so you can visually match your result through drag and drop. To finetune you can even use your cursor keys. To hide the layout do a double click again.
Every position will be logged through console.log, so you can adjust the initialisation for the next page refresh (see optional hash). If you need more information you can continue reading on the projects homepage.
Just include an empty div in your Layout and inititalize the Plugin through
jQuery('#dummy').smileDesignerSmile(pathToDraftPng, optionalArguments)
or look at some code here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="/javascript/jquery/jquery-x.x.x.min.js"></script>
<script type="text/javascript" src="/javascript/jquery/jquery.smiledesignersmile.js"></script>
</head>
<body>
...
<script>
jQuery(document).ready(function() {
jQuery(document).smileDesignerSmile('my_awesomelayout', { backgroundPosition : "-100px 100px", opacity : "0.7"} );
});
</script>
or you can specify the div by yourself
<div id="dummy" style=""></div>
<script>
jQuery(document).ready(function() {
jQuery('#dummy').smileDesignerSmile('my_awesomelayout', { backgroundPosition : "-100px 100px", opacity : "0.7"} );
});
</script>
</body>
</html>
h1. ROADMAP
- 0.8.0 Implement keys for changing opacity
- 0.9.0 Implement a basic ruler
- 1.0.0 No bugs, no tickets left
All code is © 2009, 9elements and is released under the MIT License.
Feel free to email us with any questions or feedback.
- Removed empty div depency
- Made it working in the really filthy IE6
- Replaced object hijacking with
datafunction of jQuery - Made it working with IE7
- Made logging optional