Cara Membuat Image Bubbles Effect

Image Bubbles Effect adalah effect yang menyerupai Flash yang dapat menampilkan sebuah gambar menjadi lebih besar dari ukuran aslinya saat mouse digulirkan diatas gambar tersebut.
Gambar dengan "alt" sebagai atribut dapat mendefinisikan dan menggunakannya sebagai tooltip yang ditampilkan diatas gambar.

Contoh:

1.75x magnification

• 
• 
• 
• 
• 

2.5x magnification

• 
• 
• 
• 
• 
• 

Cara Memasang Image Bubbles Effec:

Copy kode CSS dan Javascript dibawah ini diatas kode </head>

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

<style type='text/css'>
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline-block;
zoom:1; /*Trigger haslayout in IE7 and less*/
*display:inline; /*For IE7 and less*/
position:relative;
width: 65px;
height:60px;
}

.bubblewrap li img{
position:absolute;
width: 55px; /*default width of each image.*/
height: 60px; /*default height of each image.*/
left:0;
top:0;
border:0;
}

.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
position:absolute;
font:bold 12px Arial;
padding:2px;
width:100px;
text-align:center;
background:white;
}
</style>

<script type='text/javascript'>
//<![CDATA[
/*Image Bubbles Effect (April 4th, 2011)
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

jQuery.fn.imgbubbles=function(options){
 var $=jQuery
 
 var setting=$.extend({}, {factor:2, speed:'fast'}, options) //merge options w/ default settings
 return this.each(function(){ //return jQuery obj
  var $bubblewrap=$(this)
  var $imgs=$bubblewrap.find('li img')
  $imgs.each(function(){
   var $img=$(this)
   var $parentli=$img.offsetParent()
   var od={width:this.offsetWidth, height:this.offsetHeight} //original dimensions of image
   var nd={width:od.width*setting.factor, height:od.height*setting.factor} //enlarged dimensions of image
   var ncoords=[-(nd.width-od.width)/2, -(nd.height-od.height)/2] //coords to move enlarged image to
   $img.data("specs", { //cache image specs
    od: od,
    nd: nd,
    ncoords: ncoords
   })
   if ($img.attr('alt')){ //if tooltip for image defined
    var $tip=$('<div class="tooltip" style="z-index:1001" />').html($img.attr('alt')).css('visibility', 'hidden').appendTo($img.offsetParent())
    var tipd={width:$tip.outerWidth(), height:$tip.outerHeight()} //tip dimensions
    $tip.data("specs", {
     d: tipd,
     ocoords: [ncoords[0]-tipd.width/2+nd.width/2, ncoords[1]-tipd.height/2], //resting tip coords
     ncoords: [-tipd.width/2+od.width/2, -tipd.height] //tip coords to animate to
    })
    $img.data('$tip', $tip)
   }
  })

  $bubblewrap.mouseover(function(e){
   if (e.target.tagName=="IMG"){
    var $img=$(e.target), $tip=$img.data('$tip')
    var imgspecs=$img.data('specs')
    var ncoords=imgspecs.ncoords
    var od=imgspecs.od
    var nd=imgspecs.nd
    $img.stop().css('zIndex', 1000).animate({left:ncoords[0], top:ncoords[1], width:nd.width, height:nd.height}, setting.speed) //animate image
    if ($img.attr('alt')){
     var tipspecs=$tip.data("specs")
     $tip.css({zIndex:1000, visibility:'visible', left:-tipspecs.d.width/2+od.width/2, top:-tipspecs.d.height})
      .animate({left:ncoords[0]-tipspecs.d.width/2+nd.width/2, top:ncoords[1]-tipspecs.d.height}, setting.speed) //animate tip   
    }
   }
  })
 
  $bubblewrap.mouseout(function(e){
   if (e.target.tagName=="IMG"){
    var $img=$(e.target), $tip=$img.data('$tip')
    var imgspecs=$img.data('specs')
    var od=imgspecs.od
    var nd=imgspecs.nd
    $img.stop().css('zIndex', 999).animate({left:0, top:0, width:od.width, height:od.height}, setting.speed) //animate image
    if ($img.attr('alt')){
     var tipspecs=$tip.data("specs")
     $tip.css({zIndex:999, visibility:'hidden'}) //hide tip
    }
   }
  })
 
 })
}
//]]>
</script>

Copy Script berikut ini dimanapun anda ingin menampilkannya pada halaman anda

<h4>1.75x magnification</h4>

<ul id="orbs" class="bubblewrap">
<li><a href="url"><img src="#stumbleupon.png" alt="Add to Stumbleupon"/></a></li>
<li><a href="url"><img src="#facebook.png" alt="Add to Facebook"/></a></li>
<li><a href="url"><img src="#dig.png" alt="Add to Digg"/></a></li>
<li><a href="url"><img src="#twitter.png" alt="Add to Twitter"/></a></li>
<li><a href="url"><img src="#rss.png" alt="Add RSS Feed"/></a></li>
</ul>

<h4>2.5x magnification</h4>

<ul id="squares" class="bubblewrap">
<li><a href="url"><img src="#Facebook.png" alt="Add to Facebook"/></a></li>
<li><a href="url"><img src="#Delicious.png" alt="Add to Delicious"/></a></li>
<li><a href="url"><img src="#Digg.png" alt="Add to Digg"/></a></li>
<li><a href="url"><img src="#Stumbleupon.png" alt="Add to Stumbleupon"/></a></li>
<li><a href="url"><img src="#RSS.png" alt="Add RSS Feed"/></a></li>
<li><a href="url"><img src="#Twitter.png" alt="Add to Twitter"/></a></li>
</ul>

<script type="text/javascript">

jQuery(document).ready(function($){
$('ul#orbs').imgbubbles({factor:1.75}) //memberikan efek bubble pada UL id="orbs"
$('ul#squares').imgbubbles({factor:2.5}) //memberikan efek bubble pada UL id="squares"
})

</script>

Ganti Link, Gambar dan isi Tooltip sesuai dengan yang anda inginkan. Untuk melihat contoh lain klik disini

sumber: dynamicdrive