В json массиве хранятся url маленьких и больших картинок. При нажатии на маленький div нужно открыть такую же картинку, но большего размера. Вопрос в следующем как сделать чтобы по клику на div с маленькой картинкой, открывалась большая картинка?
<html>
<head>
<title> json </title>
<meta charset="windows-1251">
<script type ="text/javascript" src='jquery-2.1.1.min.js'> </script>
<script type="text/javascript">
$(function () {
var json = {
fotos: [
{
"title": "Картинка 1",
"big_url": "big_url1",
"thumb_url": "thumb_url1"
},
{
"title": "Картинка 2",
"big_url": "big_url2",
"thumb_url": "thumb_url2"
}
]
}
for (i = 0; i < json.fotos.length; i++) {
var n = "thumb_url"
var str = "<img src='" + json.fotos[i].thumb_url + "'>";
var divid = "#d00" + (i + 1);
console.log(divid);
$(divid).append(str);
}
});
</script>
<style>
.divs
{
width: 100px;
height: 100px;
border: 5px solid #f00;
background: #fff;
margin: 20px;
position: absolute;
}
#d001
{
left: 0;
top: 0;
}
#d002
{
left: 115px;
top: 0;
}
</style>
</head>
<body>
<div id ="d001" class='divs'>
</div>
<div id ="d002" class='divs'>
</div>
</body>
</html>