请问如何用jquery识别图片并点击弹出层放大（一张图片非缩略和原图关系）

请问如何用jquery识别图片并点击弹出层放大（一张图片非缩略和原图关系）

类似如下效果：http://bbs.paidai.com/topic/148952


场景描述：

1.在html中有一张图片为test.jpg 实际宽度为500px，但css设置最大宽度显示为100px
2.但用户在html页中点击此图片时，自动弹出层显示此图原大小，即显示500px

谢谢您的答复 ！
------解决方案--------------------

<img src="aaa.jpg" orgurl="aaa-big.jpg"/>//图片添加一个orgurl属性，就是他的实际路径

$(function(){

    $('img').click(function(){

        var url = $(this).attr('orgurl');//如果不想添加orgurl路径或者说src属性就是实际的路径这里可以改成$(this).attr('src')

        showBigImage(url,$(this));

    });

})

function showBigImage(url,obj){

    var maxWidth = 500;

    var offset = obj.offset();

    var start = {

        width:obj.attr('width')
------解决方案--------------------
parseInt(obj.css('width')),

        height:obj.attr('height')
------解决方案--------------------
parseInt(obj.css('height'))

    }

    $('<div></div>')

    .attr('id', 'div_img_cover')

    .css({ 'position': 'absolute', 'top': '0', 'left': '0', 'z-index': 9999, 

        'width': "100%", 

        'height': getWaitHeight(),

        'text-align': 'center',

        'font': 'bold 24px arial',

        'background-repeat': 'no-repeat',

        'background-position': 'center',

        'background-attachment': 'fixed',

        'opacity':0.8,

        'background':'#000'

        })

    .appendTo('body');

    

    var img = new Image();

    $(img).css(start);

    if(img.attachEvent){

        img.attachEvent('onload',imgLoaded)

    }else{

        img.addEventListener('load',imgLoaded,false);

    }

    img.src = url;

    function imgLoaded(){

        var imgWidth = img.width,imgHeight = img.height;

        var newWidth = imgWidth > maxWidth ? maxWidth : imgWidth;

        var newHeight = imgHeight/imgWidth*newWidth

        var end = {

            width:parseInt(newWidth),

            height