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.
Demos:
1.75x magnification
2.5x magnification
Directions
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 "magnify" inside it, for example:
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:
| 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.