popular jQuery Cropping Images

Home Image Effectspopular jQuery Cropping Images

popular jQuery Cropping Images

11 years ago Views

13341

1673

vuongnguyen

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.

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>

Tag: image gallery