article:
Elements Design: Revolution Business Card
article:
Elements Design: Mini icons - 1325 pixel perfect icons

JS Plugin: jQSlickWrap

Advertisement

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


Plugin: jQSlickWrap


"If you've ever felt the need to wrap stuff around an irregularly-shaped image using CSS's float, you may have been somewhat disappointed to find out that it's forced to wrap around the image's bounding box, rather than the actual contents of the image."


Implement

Example 1 - Basic SlickWrapping - See it in action here

Plugin: jQSlickWrap

HEAD


<script src="jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="jquery.slickwrap.min.js" type="text/javascript" charset="UTF-8"></script>

<style type="text/css">
    .wrapReady {
        float: left;
    }
</style>
<script type="text/javascript" charset="UTF-8">
    $(document).ready(function(){
        $('.wrapReady').slickWrap();
    });
</script>

BODY

<div class="container">
    <img class="wrapReady" src="./images/escalator.png" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>


Example 2 - SlickWrapping With Style - See it in action here

Plugin: jQSlickWrap

HEAD


<script src="jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="jquery.slickwrap.min.js" type="text/javascript" charset="UTF-8"></script>

<style type="text/css">
    .wrapReady {
        float: left;
        padding: 30px;
    }
</style>
<script type="text/javascript" charset="UTF-8">
    $(document).ready(function(){
        $('.wrapReady').slickWrap();
    });
</script>

BODY

<div class="container">
    <img class="wrapReady" src="./images/escalator.png" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>


Example 3 - Specifying Settings - See it in action here

Plugin: jQSlickWrap

Settings

- bgColor: The background color to use when examining the contents of the images resulting from a query. If no value is given, jQSlickWrap will try to determine the background color of the image from the image's top-left pixel.
- 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. Default value is 20.
- 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.


HEAD


<script src="jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="jquery.slickwrap.min.js" type="text/javascript" charset="UTF-8"></script>

<style type="text/css">
    .wrapReady {
        float: left;
        padding: 30px;
    }
</style>
<script type="text/javascript" charset="UTF-8">
    $(document).ready(function(){
        $('.wrapReady').slickWrap({
            bgColor: {              // use red as the background color
                r: 255,
                g: 0,
                b: 0,
                a: 255
            },
            cutoff: 10,             // let there be a tolerance of 10
            resolution: 15,         // create divs of height 15
            bloomPadding: false     // let's not use bloom
        });
    });
</script>

BODY

<div class="container">
    <img class="wrapReady" src="./images/escalator.png" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>


Requirements

jQSlickWrap requires that your browser support HTML 5's <canvas> element, and in particular it needs to have support for the toDataURL() function on canvases (meaning it won't work with excanvas, for now).


Compatibility

- Mozilla Firefox 3.5+
- Google Chrome
- Apple Safari 4+
- Opera 11+


Overview

- If necessary, pre-load the image.
- Determine the CSS styles for the image (float and padding).
- Create a <canvas> element and set its dimensions to the size of the image plus its padding.
- Draw the image onto the canvas in the top-left location.
- Figure out the "background" color of the image by examining the pixel data at the top-left corner of the image.
- Fill the <canvas> with this background color.
- Re-draw the image contents onto the <canvas>, but now in the correct location as specified by its padding.
- 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).
- Using the widths collected in the previous step, generate <div> elements of those sizes.
- Float the <div>s to the correct side, and set their clear style to the same side.
- Set the background-image to a non-repeating image described by a call to canvas.toDataURL() for the original's containing element.
- Hide the original image.



source
github
download

Advertisement
Tags: slick, wrap, plugin, lquery, js, javascript, image, css3, compatibility, develop, browsers, elements, design, ui, layout, web, canvas, div, float, padding, dimension, float

Leave a Comment

No Comment

© Creative3x Ltd.