Image Bubbles

by NinjaSk8ter

HTML

<script src="http://www.dynamicdrive.com/dynamicindex4/imgbubbles.js"></script>
<ul id="orbs" class="bubblewrap">
<li><a href="http://dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/squares/stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/squares/facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/squares/digg.png" alt="Add to Digg" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/squares/twitter.png" alt="Add to Twitter" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/squares/rss.png" alt="Add RSS Feed" /></a></li>
</ul>
<ul id="orbs" class="bubblewrap">
<li><a href="http://dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/squares/stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/squares/facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/squares/digg.png" alt="Add to Digg" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/squares/twitter.png" alt="Add to Twitter" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="http://www.dynamicdrive.com/dynamicindex4/squares/rss.png" alt="Add RSS Feed" /></a></li>
</ul>

CSS

#orbs li{
    /*width: 58px;*/
    width: 284px;
    height:60px; 
    background-color:yellow;
}

#orbs li img{
width: 60px; /*width of image before bubbling.*/
height: 60px; /*height of each image*/
}

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
/*display:inline-block;*/
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 25px; /*default width of each image.*/
height: 20px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image alt image*/
position:absolute;
font:bold 12px Arial;
color: blue;
/*padding:2px;*/
width:100px;
margin-top: 10px;
text-align:center;
background:white;
}

JavaScript

/*Image Bubbles Effect (April 4th, 2010)
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

jQuery.fn.imgbubbles=function(options){
    var $=jQuery
    
    var setting=$.extend({}, {factor:2, speed:'fast'}, options) //merge options w/ default settings
    return this.each(function(){ //return jQuery obj
        var $bubblewrap=$(this)
        var $imgs=$bubblewrap.find('li img')
        $imgs.each(function(){
            var $img=$(this)
            var $parentli=$img.offsetParent()
            var od={width:this.offsetWidth, height:this.offsetHeight} //original dimensions of image
            var nd={width:od.width*setting.factor, height:od.height*setting.factor} //enlarged dimensions of image
            var ncoords=[-(nd.width-od.width)/2, -(nd.height-od.height)/2] //coords to move enlarged image to
            $img.data("specs", { //cache image specs
                od: od,
                nd: nd,
                ncoords: ncoords
            })
            if ($img.attr('alt')){ //if tooltip for image defined
                var $tip=$('<div class="tooltip" style="z-index:1001" />').html($img.attr('alt')).css('visibility', 'hidden').appendTo($img.offsetParent())
                var tipd={width:$tip.outerWidth(), height:$tip.outerHeight()} //tip dimensions
                $tip.data("specs", {
                    d: tipd,
                    ocoords: [ncoords[0]-tipd.width/2+nd.width/2, ncoords[1]-tipd.height/2], //resting tip coords
                    ncoords: [-tipd.width/2+od.width/2, -tipd.height] //tip coords to animate to
                })
                $img.data('$tip', $tip)
            }
        })

        $bubblewrap.mouseover(function(e){
            if (e.target.tagName=="IMG"){
                var $img=$(e.target), $tip=$img.data('$tip')
                var imgspecs=$img.data('specs')
                var ncoords=imgspecs.ncoords
     ...