Script hiệu ứng Popup trượt zoom ảnh.

Đoạn mã javascript tạo popup dạng trượt trong suốt cho ảnh, giúp phóng to hình ảnh ra giữa màn hình dạng layer với tỉ lệ kích thước phù hợp mỗi khi được click chuột vào.


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

<script type="text/javascript">
//<![CDATA[

jQuery.noConflict()

jQuery.image1k={
dsettings: {
code1kby: 3,
duration: 500,
imgopacity: 0.2
},
cursorcss: 'url(code1k.cur), -moz-zoom-in',
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){
warpshell.newattrs.x=winattrs.x+5
}
if (warpshell.newattrs.y<winattrs.y+5){
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.image1k.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){
var $this=$(this).css({opacity:setting.imgopacity})
var imageinfo=$this.data('imgshell')
jQuery.image1k.refreshoffsets($(window), $this, imageinfo)
var $clone=imageinfo.$clone
$clone.stop().css({zIndex:++jQuery.image1k.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(){ 
}) 
})
$clone.click(function(e){
var $this=$(this)
var imageinfo=$this.data('$relatedtarget').data('imgshell')
jQuery.image1k.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})
})
})
}
};

jQuery.fn.image1k=function(options){
var $=jQuery
return this.each(function(){
var $imgref=$(this)
if (this.tagName!="IMG")
return true
if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){
jQuery.image1k.code1k($, $imgref, options)
}
else if (this.complete){ //account for IE not firing image.onload
jQuery.image1k.code1k($, $imgref, options)
}
else{
$(this).bind('load', function(){
jQuery.image1k.code1k($, $imgref, options)
})
}
})
};

jQuery.fn.applyMagnifier=function(options){
var $=jQuery
return this.each(function(){
var $imgref=$(this)
if (this.tagName!="IMG")
return true

})

};

jQuery(document).ready(function($){
var $targets=$('.zoom1k')
$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.image1k(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>

<center>
Hãy click vào bức ảnh để phóng to<br/>
<img border="0" src="http://2.bp.blogspot.com/-ZslmeKQo2P4/UAp2isnoROI/AAAAAAAAJAw/joIUy8oqo-A/s1600/code1k.com-script-hieu-ung-popup-truot-zoom-anh-1.jpg" width="150" height="100" class="zoom1k" />
<img border="0" src="http://3.bp.blogspot.com/-VThPkMtvNok/UAp2jtqBcoI/AAAAAAAAJA4/2s2rDnrVK-Y/s1600/code1k.com-script-hieu-ung-popup-truot-zoom-anh-2.jpg" width="150" height="100" class="zoom1k" /><br/>
<img border="0" src="http://3.bp.blogspot.com/-QffwSqxyQXg/UAp2kA6_oLI/AAAAAAAAJBA/fUrOjd-3XJk/s1600/code1k.com-script-hieu-ung-popup-truot-zoom-anh-3.jpg" width="150" height="100" class="zoom1k" />
<img border="0" src="http://1.bp.blogspot.com/-4OMdGVZeJRg/UAp2kwEDtiI/AAAAAAAAJBI/i89oW9JKWsM/s1600/code1k.com-script-hieu-ung-popup-truot-zoom-anh-4.jpg" width="150" height="100" class="zoom1k" />
</center>