xxxxxxxxxx,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<style type="text/css">
.fancybox-inner a{
color : #000000;
margin-bottom: 2px;
display: inline-block;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title a{
color : #FFFFFF;
}
.check{
border: 5px solid #0000FF;
}
.fancybox-nav {
margin-top: 20px;
}
.hot{
border: 1px dashed Gray; padding: 5px; height: 200px; width: 200px ; text-align: center;
}
.hot img{
margin: 20px auto ;
}
</style>
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script>
$(function() {
$('a[rel=gallery]').fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 500,
'speedOut' : 500
});
});
function foo()
{
$('.hot').html('<a rel="gallery" title="xxxxx" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" /></a>')
}
</script>
</head>
<body>
<div class="hot"></div>
<input name="" type="button" value="uu" onclick="foo()">
</body>
</html>