<!DOCTYPE html>
<html>
<head>
<title>json</title>
<meta charset="utf-8">
<style>
body{
background-color:#0000AD;
}
.divs{
position:relative;
width:100px;
height:100px;
border:5px solid #f00;
background:#fff;
margin:20px;
display:inline-table;
}
.divs img{
cursor:pointer;
display:block;
}
</style>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<script type="text/javascript">
$(function() {
var json = {
fotos: [{
"title": "Картинка 1",
"big_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-lg.jpg",
"thumb_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg"
}, {
"title": "Картинка 2",
"big_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-lg.jpg",
"thumb_url": "http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg"
}]
}
$.each(json.fotos, function(indx, el) {
var a = $("<a/>", {
"class": "divs fancybox",
"attr" : {"title" : el.title, "rel" : "group"},
"href" : el.big_url
}),
img = $("<img/>", {
"src": el.thumb_url,
"alt" : el.title
});
a.appendTo('body');
img.appendTo(a)
});
$(".fancybox").fancybox()
});
</script>
</head>
<body>
</body>
</html>