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.
- Light-weight script
- Easy to integrate
- 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.)
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:
4.) To remove clipping from an element, pass the keyword ‘remove’ to the jclip function:
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:
That’s it ;) Click the Demo button to see it in action.
The table below contains a list of parameters accepted by the .jclip() function.
|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.|
- MS Internet Explorer 6, 7, 8
- Mozilla Firefox 2, 3
- Opera 9+
- Apple Safari
- Google Chrome