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

<script type="text/javascript">
/* jQuery Image code1k script v1.1
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
* Demo in http://preview.code1k.com/2010/09/script-zoom-hinh-anh-kem-hieu-ung-truot.html
* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply code1k effect to an image, plus code1k to a specific width in pixels.
*/

jQuery.noConflict()

jQuery.imagecode1k={
dsettings: {
code1kby: 3, //default increase factor of enlarged image
duration: 500, //default duration of animation, in millisec
imgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(code1k.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
zIndexcounter: 100,

refreshoffsets:function($window, $target, warpshell){
var $offsets=$target.offset()
var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
warpshell.attrs.x=$offsets.left //update x position of original image relative to page
warpshell.attrs.y=$offsets.top
warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
warpshell.newattrs.x=winattrs.x+5
}
else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
warpshell.newattrs.x=winattrs.x+5
}
if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
warpshell.newattrs.y=winattrs.y+5
}
},

code1k:function($, $target, options){
var setting={} //create blank object to store combined settings
var setting=jQuery.extend(setting, this.dsettings, options)
var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
var newattrs={}
newattrs.w=(setting.code1kto)? setting.code1kto : Math.round(attrs.w*setting.code1kby)
newattrs.h=(setting.code1kto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.code1kby)
$target.css('cursor', jQuery.imagecode1k.cursorcss)
if ($target.data('imgshell')){
$target.data('imgshell').$clone.remove()
$target.css({opacity:1}).unbind('click.code1k')
}
var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
$clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
$target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
$target.bind('click.code1k', function(e){ //action when original image is clicked on
var $this=$(this).css({opacity:setting.imgopacity})
var imageinfo=$this.data('imgshell')
jQuery.imagecode1k.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
var $clone=imageinfo.$clone
$clone.stop().css({zIndex:++jQuery.imagecode1k.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible'})
.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
function(){ //callback function after warping is complete
//none added
}) //end animate
}) //end click
$clone.click(function(e){ //action when magnified image is clicked on
var $this=$(this)
var imageinfo=$this.data('$relatedtarget').data('imgshell')
jQuery.imagecode1k.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration,
function(){
$this.hide()
$this.data('$relatedtarget').css({opacity:1}) //reveal original image
}) //end animate
}) //end click
}
};

jQuery.fn.imagecode1k=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
var $imgref=$(this)
if (this.tagName!="IMG")
return true //skip to next matched element
if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
jQuery.imagecode1k.code1k($, $imgref, options)
}
else if (this.complete){ //account for IE not firing image.onload
jQuery.imagecode1k.code1k($, $imgref, options)
}
else{
$(this).bind('load', function(){
jQuery.imagecode1k.code1k($, $imgref, options)
})
}
})
};

jQuery.fn.applyMagnifier=function(options){ //dynamic version of imagecode1k() to apply code1k effect to an image dynamically
var $=jQuery
return this.each(function(){ //return jQuery obj
var $imgref=$(this)
if (this.tagName!="IMG")
return true //skip to next matched element

})

};


//** The following applies the code1k effect to images with class="code1k" and optional "data-code1kby" and "data-code1kduration" attrs
//** It also looks for links with attr rel="code1k[targetimageid]" and makes them togglers for that image

jQuery(document).ready(function($){
var $targets=$('.code1k')
$targets.each(function(i){
var $target=$(this)
var options={}
if ($target.attr('data-code1kto'))
options.code1kto=parseFloat($target.attr('data-code1kto'))
if ($target.attr('data-code1kby'))
options.code1kby=parseFloat($target.attr('data-code1kby'))
if ($target.attr('data-code1kduration'))
options.duration=parseInt($target.attr('data-code1kduration'))
$target.imagecode1k(options)
})
var $triggers=$('a[rel^="code1k["]')
$triggers.each(function(i){
var $trigger=$(this)
var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='code1k[id]'
$trigger.data('code1kimageid', targetid)
$trigger.click(function(e){
$('#'+$(this).data('code1kimageid')).trigger('click.code1k')
e.preventDefault()
})
})
})

</script>

<img border="0" src="http://c.upanh.com/upload/7/623/CS0.11836285_29781_1.png" width="100" height="100" class="code1k" />
<img border="0" src="http://ca1.upanh.com/8.786.12994781.ZPN0/48.gif" width="100" height="100" class="code1k" /><br/>
<img border="0" src="http://c.upanh.com/upload/7/836/CS0.12049526_29781_1.jpg" width="100" height="100" class="code1k" />
<img border="0" src="http://c.upanh.com//upload/7/836/UL0.12049512_29781_1.jpg" width="100" height="100" class="code1k" />