Untitled

Manipulate elements of the DOM that are dynamically loaded after document loads
$(document).ready(function(){
$('#content img').click(function(){
    var img = this;
    var width = img.clientWidth;
    var height = img.clientHeight;
    var imgWidth = -width/2;
    var imgHeight = -height/2;
    $(this).wrap('<div class="box"></div>');
    $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
    $('.box').animate({'opacity':'1.00'}, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
    $('.box').css('margin-left', imgWidth);
    $('.box').css('margin-top', imgHeight);
});

$('.close').click(function(){
    close_box();
});

$('.backdrop').click(function(){
    close_box();
});

});

function close_box()
{
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
    $('.backdrop, .box').css('display', 'none');
});
}

.backdrop {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
}


.box {
position:absolute;
top:50%;
left:50%;
background:#ffffff;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}

.close {
float:right;
margin-right:6px;
cursor:pointer;
}

$('#content').on('click', 'img', function(){
    var img = this;
    var width = img.clientWidth;
    var height = img.clientHeight;
    var imgWidth = -width/2;
    var imgHeight = -height/2;
    $(this).wrap('<div class="box"></div>');
    $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
    $('.box').animate({'opacity':'1.00'}, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
    $('.box').css('margin-left', imgWidth);
    $('.box').css('margin-top', imgHeight);
});