25 November 2009 0 Comments

jQSlickWrap for Slick Text Wrapping in jQuery

We all know how to use a float property to float an image around a block of text. But what if you want to wrap content around an image… you know the actual image content itself not the block it takes up?  jQSlickWrap is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images.

arrow[1]

Very very simple usage (:

$('img').slickWrap();

Example :

<html>
    <head>
        <title>jQSlickWrap Demo 1</title>
        <script src="./jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="./jquery.slickwrap.js" type="text/javascript"></script>
        <style type="text/css">
            .wrapReady {
                float: left;
            }
        </style>
        <script type="text/javascript" charset="UTF-8">
            $(document).ready(function(){
                $('.wrapReady').slickWrap();
            });
        </script>
    </head>
    <body>
        <img src="./myImage.jpg" class="wrapReady" />
        <p>Lots of text goes here..</p>
    </body>
</html>

See it in action here!

DownloadWebsite

http://jqueryblog.net/wp-content/plugins/sociofluid/images/digg_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/reddit_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/dzone_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/stumbleupon_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/delicious_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/blinklist_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/blogmarks_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/furl_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/newsvine_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/technorati_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/magnolia_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/google_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/myspace_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/facebook_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/yahoobuzz_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/sphinn_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/mixx_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/twitter_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/jamespot_24.png http://jqueryblog.net/wp-content/plugins/sociofluid/images/meneame_24.png

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes