jQuery-Fakecrop: Cropping Images with jQuery

on June 13, 2012 in technology about

Once in a while, you just want to display a collection (or more) of images with different dimensions. The problem seems easy enough.

The task of manually creating thumbnail for each image is quite tedious and it’s definitely not worth the trouble to write a script to generate the thumbnails either. Let’s face it, this starts to feel… annoying.

Now, being a problem solver and a big proponent of DRY, I created jQuery-Fakecrop, a jQuery plugin.

jQuery-Fakecrop takes a collection of images and automatically scale them to fit a custom-defined bounding box. This creates a “fake” cropping effect on those images; which produces convincing thumbnails.

Below is the demo as well as the links to download & fork this plugin.

Quick Start

<script src="/path/to/jquery-library.js"></script>
<script src="/path/to/jquery.fakecrop.js"></script>
<script>
    $(document).ready(function () {
        // for a filled square thumbnail
        $('img').fakecrop();
        // for a fixed width/height
        $('img').fakecrop({fill: false});
    });
</script>

Normal

NOTE: Since every image in this collection has extremely different dimensions, I restricted the height of the images to 100 pixel in CSS so this part of the page doesn’t look so… terrible.

With Fakecrop (default)

$('#fakecrop-fill img').fakecrop();

With Fakecrop {fill : false}

$('#fakecrop img').fakecrop({ fill: false });

Public domain photographs courtesy of United State Department of Agriculture