http://www.slavyansk.tv/imgbubbles.js

1
2jQuery.fn.imgbubbles=function(options){
3	var $=jQuery
4	
5	var setting=$.extend({}, {factor:2, speed:'fast'}, options) //merge options w/ default settings
6	return this.each(function(){ //return jQuery obj
7		var $bubblewrap=$(this)
8		var $imgs=$bubblewrap.find('li img')
9		$imgs.each(function(){
10			var $img=$(this)
11			var $parentli=$img.offsetParent()
12			var od={width:this.offsetWidth, height:this.offsetHeight} //original dimensions of image
13			var nd={width:od.width*setting.factor, height:od.height*setting.factor} //enlarged dimensions of image
14			var ncoords=[-(nd.width-od.width)/2, -(nd.height-od.height)/2] //coords to move enlarged image to
15			$img.data("specs", { //cache image specs
16				od: od,
17				nd: nd,
18				ncoords: ncoords
19			})
20			if ($img.attr('alt')){ //if tooltip for image defined
21				var $tip=$('<div class="tooltip" style="z-index:1001" />').html($img.attr('alt')).css('visibility', 'hidden').appendTo($img.offsetParent())
22				var tipd={width:$tip.outerWidth(), height:$tip.outerHeight()} //tip dimensions
23				$tip.data("specs", {
24					d: tipd,
25					ocoords: [ncoords[0]-tipd.width/2+nd.width/2, ncoords[1]-tipd.height/2], //resting tip coords
26					ncoords: [-tipd.width/2+od.width/2, -tipd.height] //tip coords to animate to
27				})
28				$img.data('$tip', $tip)
29			}
30		})
31
32		$bubblewrap.mouseover(function(e){
33			if (e.target.tagName=="IMG"){
34				var $img=$(e.target), $tip=$img.data('$tip')
35				var imgspecs=$img.data('specs')
36				var ncoords=imgspecs.ncoords
37				var od=imgspecs.od
38				var nd=imgspecs.nd
39				$img.stop().css('zIndex', 1000).animate({left:ncoords[0], top:ncoords[1], width:nd.width, height:nd.height}, setting.speed) //animate image
40				if ($img.attr('alt')){
41					var tipspecs=$tip.data("specs")
42					$tip.css({zIndex:1000, visibility:'visible', left:-tipspecs.d.width/2+od.width/2, top:-tipspecs.d.height})
43						.animate({left:ncoords[0]-tipspecs.d.width/2+nd.width/2, top:ncoords[1]-tipspecs.d.height}, setting.speed) //animate tip			
44				}
45			}
46		})
47	
48		$bubblewrap.mouseout(function(e){
49			if (e.target.tagName=="IMG"){
50				var $img=$(e.target), $tip=$img.data('$tip')
51				var imgspecs=$img.data('specs')
52				var od=imgspecs.od
53				var nd=imgspecs.nd
54				$img.stop().css('zIndex', 999).animate({left:0, top:0, width:od.width, height:od.height}, setting.speed) //animate image
55				if ($img.attr('alt')){
56					var tipspecs=$tip.data("specs")
57					$tip.css({zIndex:999, visibility:'hidden'}) //hide tip
58				}
59			}
60		})
61	
62	})
63}