BUBBLEUP – JQUERY PLUGIN

BubbleUp is a jQuery plugin released from a jQuery tutorial Learning jQuery: Your First jQuery Plugin, BubbleUP which helps you to create your first jQuery plugin. It’s not just for demonstration, it’s useable. With BubbleUP, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation. Imagine the Mac Dock effect, although this plugin’s effect is not awesome like that, it’s light weight for such a similar zooming effect.

Features:

• Your menu will be scaled in any size via the option.
• You decide to enable the tooltip or not.
• The tooltip would be customizable by font, size and color.
• The speed of the transition (in/out) can be controlled.

Usage

Make sure you already implement jQuery library. I recommend to use jQuery hosted from Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

Now you need to link the javascript file that you created above into your web page. For this, we use this code:

<script type="text/javascript" src="js/bubbleup.jquery.js"></script>

To make the plugin work, we need to use this code below. You can insert it anywhere you want as long as its inside the or tags:

<script type="text/javascript">
$(function(){
    $("ul#menu li img").bubbleup();
});
</script>

Another example with option enable:

<script type="text/javascript">
$(function(){
    $("div#demo ul#menu li img").bubbleup({tooltip: true, scale:64});
});
</script>