Dynamic Drive DHTML Scripts- Image Bubbles effect

New Revised CSS Library Forums Web Tools

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

2.5x magnification

Directions

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

Select All

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

<link href="imgbubbles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

/*CSS for 2 demos on the page*/
#orbs li{
width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */
height:60px; /*height of image container. Should be taller than contained images (before bubbling) */
}

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

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

#squares li img{
width: 31px; /*width of each image before bubbling*/
height: 31px; /*height of each image*/
}

</style>

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

/***********************************************
* Image Bubbles effect- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

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

</script>

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

<h4>1.75x magnification</h4>
<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.png" alt="Add RSS Feed" /></a></li>
</ul>


<h4>2.5x magnification</h4>
<ul id="squares" class="bubblewrap">
<li><a href="http://dynamicdrive.com"><img src="squares/facebook.png" alt="Add to Facebook" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/delicious.png" alt="Add to Delicious" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/digg.png" alt="Add to Digg" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/stumbleupon.png" alt="Add to Stumbleupon" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/rss.png" alt="Add RSS Feed" /></a></li>
<li><a href="http://dynamicdrive.com"><img src="squares/twitter.png" alt="Add to Twitter" /></a></li>
</ul>

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:

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:

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.