/*
* Bubbleup 0.0.2 - Spicing up menu jQuery plugin
*
* Tranform the images inside the list items like Mac Dock effect
*
* Homepage: http://aext.net/2010/04/bubbleup-jquery-plugin/
*
* Copryright? I don't have any!
*
* First written by Lam Nguyen (yah, it's me)
* Written again by Jonathan Uhlmann http://jonnitto.ch
* Thanks to Icehawg (Hey, I don't know anything from him, just a name
* http://aext.net/2010/02/learn-jquery-first-jquery-plugin-bubbleup/#comment-6777)
*
* Formatted, enhanced & documented by JRDiaz <[email protected]>
* http://3nibbles.blogspot.com/
*
* - Formatted text
* - Automated CSS of the elements for minimal impact on css file
* - Added animations effects
* - Added usage documentation, sample data structure and minimal CSS needed
* - Tooltip styling with CSS
*
* USAGE
* $("#container .listElement .element").bubbleup();
*
* DATA STRUCTURE. Only needed elements are "element" and his container. Tooltip text is element's alt text
* <div id="container">
* <ul id="list">
* <li class="listElement"> <a href="http://xxx"><img class="element" src="images/yyy.png" alt="Alt text"/> </a> </li>
* </ul>
* </div>
*
* CSS - Container width/height must be set and be the same to element width/height
* .bubbleup_tooltip { padding: 2px; border: 1px solid black; background: lightyellow; -moz-border-radius: 10px; border-radius: 10px; } /* Sample * /
* #container { text-align: center; } /* Sample to get text centering * /
* #container #list { list-style: none; display: inline-block; } /* list-style and display samples * /
* #container #list .listElement { width: 48px; height: 48px; float: left; } /* float is sample * /
* #container #list .listElement .element { width: 48px; } /* same width as listElement * /
*/
(function($){
$.fn.bubbleup = function(options) {
// Plugin parameters and defaults
$.fn.bubbleup.defaults = {
tooltip : false,
scale : 96,
fontSize : 12,
fontFamily: 'Helvetica, Arial, sans-serif',
color : '#333333',
fontWeight: 'bold',
inSpeed : 'fast',
outSpeed : 'fast',
inAnim : 'swing',
outAnim : 'swing'
};
//Extend the default options of plugin
var opt = $.extend( {}, $.fn.bubbleup.defaults, options),
tip = null;
return this.each(function() {
var w = $(this).width();
// Style modifications to the element make it works as intended
$(this).css( {
position: 'relative'
} );
// Mouseover
$(this).mouseover( function() {
// Tooltip control
if(opt.tooltip) {
tip = $('<div>' + $(this).attr('alt') + '</div>').css( {
fontFamily: opt.fontFamily,
color : opt.color,
fontSize : opt.fontSize,
fontWeight: opt.fontWeight,
position : 'absolute',
zIndex : 100000
} ).remove().css({
top : 0,
left : 0,
visibility: 'hidden',
display : 'block'
} ).addClass('bubbleup_tooltip').appendTo(document.body);
var position = $.extend( {}, $(this).offset(), {
width:this.offsetWidth,
height:this.offsetHeight
}),
tipWidth = tip[0].offsetWidth,
tipHeight = tip[0].offsetHeight;
tip.stop().css( {
top : position.top - tipHeight,
left : position.left + position.width / 2 - tipWidth / 2,
visibility: 'visible'
}).animate( {
top: '-=' + (opt.scale / 2 - w / 2)
}, opt.inSpeed, opt.inAnim);
}
$(this).closest('li').css( { 'z-index': 100000 } );
$(this).stop().css( {
'z-index': 100000,
'top' : 0,
'left' : 0,
'width' : w
} ).animate({
left : -opt.scale / 2 + w / 2,
top : -opt.scale / 2 + w / 2,
width: opt.scale
}, opt.inSpeed, opt.inAnim);
});
// Mouseout
$(this).mouseout(function(){
$(this).closest('li').css( { 'z-index': 100 } );
$(this).closest('li').next().css( { 'z-index': 0 } );
$(this).closest('li').next().css( { 'z-index': 0 } );
$(this).closest('li').next().children('img').css( { 'z-index': 0 } );
if(opt.tooltip) { tip.remove(); }
$(this).stop().animate( {
left : 0,
top : 0,
width: w
}, opt.outSpeed, opt.outAnim, function() {
$(this).css( { 'z-index': 0 } );
});
});
});
};
})(jQuery);
// SAMPLE CODE!
$(function(){
$("div#demo ul#menu li img").bubbleup({tooltip: true, scale:96, inSpeed: 100, outSpeed: 100});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>BubbleUp 0.0.2</title>
</head>
<body>
<div id="demo">
<ul id="menu">
<li> <a href="http://feeds2.feedburner.com/aextnet"><img src="http://aext.net/example/bubbleboo-jquery-plugin-tutorial/images/feed.png" alt="Full RSS Feed"/></a> </li>
<li> <a href="http://feedburner.google.com/fb/a/mailverify?uri=aextnet&loc=en_U"> <img src="http://aext.net/example/bubbleboo-jquery-plugin-tutorial/images/email.png" alt="E-Mail Delivery"/></a> </li>
<li> <a href="http://twitter.com/aextnet"> <img src="http://aext.net/example/bubbleboo-jquery-plugin-tutorial/images/twitter.png" alt="Follow us on Twitter"/></a> </li>
<li> <a href="http://facebook.com/aextnet"> <img src="http://aext.net/example/bubbleboo-jquery-plugin-tutorial/images/facebook.png" alt="I'm on FaceBook"/></a> </li>
<li> <a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=http://aext.net&title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;"> <img src="http://aext.net/example/bubbleboo-jquery-plugin-tutorial/images/delicious.png" alt="Save it!"/></a> </li>
<li> <a href="http://technorati.com/faves?sub=addfavbtn&add=http://aext.net"> <img src="http://aext.net/example/bubbleboo-jquery-plugin-tutorial/images/technorati.png" alt="Favorite this blog"/></a> </li>
</ul>
</div>
<div style="clear: both;"></div>
</body>
</html>
div#demo { margin: 50px auto 50px auto; text-align: center; }
div#demo ul#menu {
margin: 5px 0px;
list-style: none;
display: inline-block;
}
div#demo ul#menu li {
float: left;
width: 48px;
height: 48px;
margin: 5px;
}
div#demo ul#menu li a {}
div#demo ul#menu li img { width: 48px; }
.bubbleup_tooltip {
padding: 2px;
border: 1px solid black;
background: lightyellow;
-moz-border-radius: 10px;
border-radius: 10px;
}