Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What’s this 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.

Demonstration

This is how this plugin is in action. The image will be restored to the original size when you mouse over it, then reseted to initial size when you mouse out.
The icons used in this tutorial can be found free here.
I cannot take full credit for this plugin. I would like to give big thanks to Jonathan Uhlmann and Icehawg for the code optimization and suggestion.
[inline]

[/inline]

Requirements

Options

This jQuery plugins has some handy options, so you can customize it to override the default values

Option Type Default Description
tooltip boolean false Enable or disable the tooltip for the menu items
scale number 96 The size of menu item will be scaled to
fontFamily string Helvetica, Arial, sans-serif Font-family for the tooltip
color hexadecimal #333333 Color for the tooltip
fontSize number 12 Font size for the tooltip
fontWeight string bold You can customzie the tooltip to make it bold, light, italic…
inSpeed string/number fast Value of the time which menu item complete its transition in mouse in event
outSpeed string/number fast Value of the time which menu item complete its transition in mouse out event

Download

This plugin were built for fun and learning jQuery purpose, so you can download it for free and using it without restriction. Ensure to credit it to this page when you use it elsewhere. If not, I won’t mind. Am I nice?

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’ll 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 it’s inside the <head> or <body> 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>

Changelog

  • Version 1.0
    • Written again by Jonathan Uhlman and Icehawg
    • Fixed IE7 issue: unexpected transition when click on the item
    • Fixed Opera 10 rendering bug: ugly rendering, the image was cut off and blurry.
    • Fixed transition issue with z-index.
    • Added some stuff to optimize the plugin.
    • Ouch, IE6? Sorry!
  • Initial version (tutorial) Worked only with specific image size.

P/S: To someone who cannot see it works here. The plugin will work fine, if you cannot see it does, please download and run it in your own example. It’s sometime caused by others jQuery plugins to make it conflicted. Furthermore, maybe once day, I will change the theme and I won’t work anymore, just download it! Cheer!