jQSlickWrap

jQSlickWrap implementiert als jQuery Plugin den Sliced and Diced Sandbags Ansatz von A List Apart.

jQSlickWrap is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images.

Und so funktioniert es:

  1. If necessary, pre-load the image.
  2. Determine the CSS styles for the image (float and padding).
  3. Create a <canvas></canvas> element and set its dimensions to the size of the image plus its padding.
  4. Draw the image onto the canvas in the top-left location.
  5. Figure out the “background” color of the image by examining the pixel data at the top-left corner of the image.
  6. Fill the <canvas></canvas> with this background color.
  7. Re-draw the image contents onto the <canvas></canvas>, but now in the correct location as specified by its padding.
  8. Iterate through the image to find the “edge” of the image’s contents at each row - save this width. (the size of a row is defined to be the resolution in the settings to a call to slickWrap).
  9. Using the widths collected in the previous step, generate <div></div> elements of those sizes.
  10. Float the <div></div>s to the correct side, and set their clear style to the same side.
  11. Set the background-image to a non-repeating image described by a call to canvas.toDataURL() for the original’s containing element.
  12. Hide the original image.

Possibly related posts (automatically generated)