14 6 / 2010

jQSlickWrap: Wrap Text Around Images with jQuery

Jason Feinstein has written a plugin for jQuery called jQSlickWrap, which allows text to flow around the actual contents of the image instead of the bounding box.  This is useful if your images have a transparent background, in which case jQSlickWrap enables text to flow within the transparent parts of the image.  According to the post, the best part of the plugin is its ease of use:

$('img').slickWrap();

jQSlickWrap works by reading image data using the HTML5 canvas element, and figuring out where the content of the image is based on a background color (which may be transparent).  Based on the location of the image’s content, the plugin generates <div> elements of the correct size and then floats them to the correct side of the image.  It works very well and very fast!

You can check out the plugin and some example code here, and see a nice working example here.

Nice work, Jason!