Bookmark to del.icio.us
FF1+ IE6+ Opr9+
Image Bubbles effect
Description: Image Bubbles is a cool Flash-like effect that causes an image to bubble up and expand whenever the mouse rolls over it from within a series of images. It's a nice way to draw attention to an image when the mouse rolls over it. For images with an "alt" attribute defined, the script will use it to render a nice tooltip that's shown above the enlarged image. Both the speed and magnification level of the image when it bubbles up can be customized. Cool!
Credits for this script must go to the Article "Your First jQuery Plugin- BubbleUp" for the excellent concept and idea.
Simply add the below code inside the <HEAD> section of the page:
The above code references two external files which you should download below (right click, and select "Save As"):
Step 2: Then, to apply enable the magnify effect on an image
just insert a CSS class of "
The sample HTML markup references some icons images, which you can download here for ease of testing out the script. Unzip the file into the same directory as where the script page resides. FYI the entirely sets of lovely icons used in the demo are Blue Orbs social Icons and webtoolkit4me social icons which you can download.
And that's it for installation.
In Detail- Setting up the script
The HTML markup for your "bubble images" should consist of a UL
list with an arbitrary but unique ID attribute and the CSS class "
All images within the UL will have the bubble effect applied to
it. If you want a tooltip to also disappear above the enlarged image, insert an
With the markup of your bubble images set up, initialize the effect by calling the following function in the HEAD section of your page:
Where "selector" is the jQuery selector that references the UL
This selects the Bubbles UL with ID="orbs" and gives the image a magnification factor of 1.75x (default is 2x). The following lists the possible options:
To define both options at once, simply separate each with a comma, for example:
Customizing the CSS/style of the bubble images
To create the bubbles effect, images are absolutely positioned
inside a relatively positioned UL list. This positioning related properties is
defined inside imagebubbles.css and should be
preserved. To customize the style of the tooltip, such as its font style and
width, modify the class "
One important aspect of the style you need to customize is the dimensions of each LI and that of the contained bubble image, respectively. Here is the global CSS for the "orbs" bubble images shown in the demo above:
It sets each image's width at 55px by 60 px initially. The parent LI also should have both a width and height defined, which should be larger than each image's dimensions (before magnification) to comfortably house the image. In the above case, it's set to 65px by 60px.