jClip jQuery Plugin for Image and Content Clipping.

Framework: jQuery Listed in: Effects

That's right! For only $19.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!
jClip

Description

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
That's right! For only $19.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!

comixene

June 3, 2012

hi

it’s possible to re-size the image?
e.g.: $(’.test’).jclip(0, 126, 200, 76); should create a NEW image with width 200px and height 76px.

Joe

July 8, 2011

How would I animate the clip property?

ajaxBlender.com

November 3, 2010

Hi A!
$(this).attr(’clip’) – this will return a string. You should split it into array and then assign it to the clip function.
For example:
var params = $(this).attr(’clip’).split(‘,’);
$(’.clip’).jclip(params[0], params[1], params[2], params[3]);

a

October 22, 2010

here’s the HTML again (removed brackets so it will actually show)

img class=”clip” src=”images/01.jpg” clip=”30,50,120,120″
img class=”clip” src=”images/02.jpg” clip=”50,35,120,120″

a

October 22, 2010

Hi!
Been trying to use this sort of simplified syntax without much success. Would you be able to help and let me know if this sort of “inline” syntax is at all possible with your plugin?

Thanks

JS:

$(document).ready(function(){
$(’.clip’).jclip( $(this).attr(’clip’) );
});

HTML:

Leave a comment

Your name

December 5, 2016

Spam protection. Enter result of expression you see in the box below.

2 + 4 =