jClip is a simple jQuery plugin which allows image and content clipping. This is useful for when an image (or content area) is larger than the container where it resides. You are able to specify the dimensions of an absolutely positioned element which you want to be visible. The element is then clipped into the rectangular shape and displayed.
The function of jClip is similar to css "clip:rect" style but jClip provides a fully cross-browser implementation of this method with ability for you to animate the clipped content using standard jQuery animate functions.
Features
1. Light-weight script
2. Easy to integrate
3. Works with all modern browsers
How to Use
1.) Download jClip script. The package already contains jQuery framework.
2.) Add the following code to your < head >…< /head > tag to connect jQuery framework and jClip plugin. (Make sure paths to files are correct.)
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../xbreadcrumbs.js"></script>
3.) Use the following code to apply the clipping function to an element, we recommend you run it in a domReady event. The code below will clip the element with ID #sample-1 from its top left corner with a width of 100 and a height of 100:
<script type="text/javascript"> $(document).ready(function(){ $('#sample-1').clip(0, 0, 100, 100); // The code above is equal to: $('#sample-1').clip(100, 100); }); </script> 4.) To remove clipping from an element, pass the keyword 'remove' to the jclip function:
<script type="text/javascript"> $(document).ready(function(){ $('#sample-1').clip('remove'); }); </script> 5.) By default, jClip will start clipping from the top left corner of the element but you may specify Top and Left positions with the first two arguments. As seen in the sample below, jClip will start clipping with 20 pixel offset from top and left:
<script type="text/javascript"> $(document).ready(function(){ $('#sample-1').clip(20, 20, 100, 100); }); </script> That's it 
Click the Demo button to see it in action.
Parameters
The table below contains a list of parameters accepted by the .jclip() function.
Parameters Description
remove jclip('remove'). Removes clipping from the element.
width, height jclip(width, height). Applies clipping to an element from top left corner with specified width and height.
left, top, width, height jclip(left, top, width, height). Applies clipping to an element from the specified left and top coordinate with a set width and height of the clipping area.
Browser Compatibility
Tested in:
* MS Internet Explorer 6, 7, 8
* Mozilla Firefox 2, 3
* Opera 9+
* Apple Safari
* Google Chrome
Demo: http://www.ajaxblender.com/script-sources/jclip/demo/index.html
Download: http://www.ajaxblender.com/script-sources/jclip/download/jclip.zip
Source: http://www.ajaxblender.com/jclip-plugin.html
Related Listings:
- Tabbed Content Area : jQuery Plugin One of the biggest challenge to web designers is finding...
- Tabify – Tabbed content with ease – jQuery plugin This Jquery plugin lets you easily create tabbed content. All...
- GalleryView – A jQuery Content Gallery Plugin Using GalleryView requires a simple function call and four parameters:...
