Hey friend, in the previous jQuery Learning tutorial, I wrote an article that helps you to create your own jQuery plugin with the fun zooming effect. This plugin has received a lot of attention for a while and there are some suggestion from you guys to help this plugin to be better. I collected some interesting recommendations and bug fixes from my readers to write it again and release it. This plugin now is more flexible, easy to customize and working with all major web browsers with any size of images. Sounds cool? Enjoy it!
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.
- 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.
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.
This jQuery plugins has some handy options, so you can customize it to override the default values
|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|
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?
Make sure you already implement jQuery library. I recommend to use jQuery hosted from Google:
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:
Another example with option enable:
- Version 1.0
- 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!