If so read on...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="imgbit.js"></script> <link rel="stylesheet" href="css/imgbit.css">
<script type="text/javascript">
$(document).ready( function(){
$(".imgbit" ).imgbit();
});
</script>
To use just add class="imgbit" to an <a> tag. In the href attribute after the image url add the clipping coordinates using html GET parameters ?imgbit=x1=0%y1=0%x2=100%y2=100.
Any text inside the anchor tag will become the image caption.
<a class="imgbit" href="../../img/morpho.jpg?imgbit=x1=200%y1=100%x2=400%y2=400">Butterfly Body</a>Butterfly Body
If you want to change the scale of an image you can add a zoom parameter. %z=2 added to the first example will scale the image to 200% its clipped size.
<a class="imgbit" href="../../img/morpho.jpg?imgbit=x1=200%y1=100%x2=400%y2=400%z=2">Butterfly Body Z</a>Butterfly Body Z
If you want an image to be scaled to a specific width you can add a width parameter. %w=200 will scale the image to 200px wide.
<a class="imgbit" href="../../img/morpho.jpg?imgbit=x1=200%y1=100%x2=500%y2=400%w=200">Butterfly Body W</a>Butterfly Body W
You guessed it! If you want an image to be scaled to a specific height you can add a height parameter. %h=200 will scale the image to 200px tall.
<a class="imgbit" href="../../img/morpho.jpg?imgbit=x1=200%y1=100%x2=400%y2=400%h=200">Butterfly Body H</a>Butterfly Body H
If you want just the clipped image, no caption, no source button, add min to the <a>'s class attribute.
<a class="imgbit min" href="../../img/morpho.jpg?imgbit=x1=200%y1=100%x2=400%y2=400%w=200"></a>
If you want an editable caption, because oh say you're using imgbit as part of a larger application which requires you to have an editable caption pass the 'edit' class.
<a class="imgbit edit" href="../../img/morpho.jpg?imgbit=x1=200%y1=100%x2=400%y2=400%w=200">You can edit this caption! Wow!</a>You can edit this caption! Wow!
If you want color add a c=[hex] parameter. This does not work with the 'min' option.
<a class="imgbit edit" href="../../img/morpho.jpg?imgbit=x1=200%y1=100%x2=400%y2=400%w=200%c=ffa9a9">You can edit this caption! Wow!</a>You can edit this caption! Wow!
If you want to add a close button add the 'closable' class.
You'll need to listen for the IMGBIT-CLOSED event to actually do any closing... More documentation on that to come.
<a class="imgbit edit closable" href="../../img/morpho.jpg?imgbit=x1=200%y1=100%x2=400%y2=400%w=200">Click X to close</a>Click X to close
