Every web developer needs to wrap some text around image. It’s a must – we dont want to have content all linear – some text, then image, then text…, afcourse we want to do it more nicely.

The old way was to to use html like this:

<img src=”IMAGE URL” align=”left” /><p>Your text goes here.</p>

And then you got an image on the left and the content on the right. Very simple.

And soooo boring and limiting. What is we want the text closer to the image? We could use some css, put an image in the background, and some text over it… but again a lot of limitations – its hard to do it with some CMS, like wordpress for example, and you can’t put content really around the image.

Really around the image?

Did we say really around the image? Like new jQuerry plugin jQSlickWrap does it, like this:

Yesssss :)

And its so really easy to use. It cant be easier, and the plugin does all the magic by himself. You simply add:

$('img').slickWrap();

And your done :)

Afcurse you have some configuration options like:

• Class name of the image: If you dont want to do it on all images, just the one.
• bgColor: well, its a background color duh :P
• cutoff: The maximum allowable “distance” between a pixel’s color and the background color that will qualify that pixel as being considered as part of the background. Defaults to 5
• resolution: The height of the div elements to be created
• bloomPadding: Whether or not to use the advanced “bloom” algorithm to calculate precise padding distances. This is very slow in the current version, so the default value is false

Is it too good to be true?

Yes, afcourse it is…

The plugin needs to have a browser that supports HTML 5’s new <canvas> element to work properly. And unfortunately, a lot of people doesnt have them yet… i go to cry on the tree :(

Requirements: jQuery

Compatibility: All Major New Browsers (iecanvas is required for Internet Explorer)

Website: http://jwf.us/projects/jQSlickWrap/

Download: http://code.google.com/p/jqslickwrap/downloads/detai...