New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE6+ Opr9+

Image Bubbles effect

  Author: Dynamic Drive

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.

Demos:

1.75x magnification

  • Add to Stumbleupon
  • Add to Facebook
  • Add to Digg
  • Add to Twitter
  • Add RSS Feed

2.5x magnification

  • Add to Facebook
  • Add to Delicious
  • Add to Digg
  • Add to Stumbleupon
  • Add RSS Feed
  • Add to Twitter


Directions Developer's View

Simply add the below code inside the <HEAD> section of the page:

Select All

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 "magnify" inside it, for example:

Select All

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 "bubblewrap". For example:

<ul id="orbs" class="bubblewrap">
<li><a href="http://dynamicdrive.com"><img src="orbs/stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/digg.png" alt="Add to Digg" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/twitter.png" alt="Add to Twitter" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="orbs/rss-basic.png" alt="Add RSS Feed" /></a></li>
</ul>

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 "alt" attribute inside the image.

With the markup of your bubble images set up, initialize the effect by calling the following function in the HEAD section of your page:

jQuery(document).ready(function($){
  $(selector).imgbubbles({options}
})

Where "selector" is the jQuery selector that references the UL element, and options is an object containing any optional settings to be passed in. To initialized the above markup for example, you may do:

jQuery(document).ready(function($){
 $('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
})

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:

imagebubbles() options
option Description
factor=number
 
Sets the magnification level of the image when it "bubbles" up. Enter a number larger than 1, decimals allowed (ie: 4.5). Default is 2x.
speed=number Sets the speed, or duration of the bubbling effect. Enter a number to specify duration in milliseconds (ie: 1000 for 1 second), or the keywords "fast", "normal", or "slow". Default to "fast".

To define both options at once, simply separate each with a comma, for example:

jQuery(document).ready(function($){
 $('ul#orbs').imgbubbles({factor:3.15, speed:1500})
})

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 "tooltip" inside this file. The width of the tooltip affects whether long tooltips will appear as multiple lines or not.

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:

<style type="text/css">

#orbs li{
width: 65px; /*width of image container. Must be wider than contained images (before bubbling) */
height:60px; /*height of image container. Must be taller than contained images (before bubbling) */
}

#orbs li img{
width: 55px; /*width of each image before bubbling.*/
height: 60px; /*height of each image*/

}

</style>

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.