sashaslow,
медититруйте ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.gal img{
width: 150px;
height: 150px;
}
.show img{
width: 300px;
height: 150px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var people = [{
name: "Быдлокодер",
text: "Орешки",
big_foto: "http://cs11383.vk.me/u163027882/-6/x_b91a42c8.jpg",
mini_foto: "http://cs11383.vk.me/u163027882/-6/x_b91a42c8.jpg"
}, {
name: "Петрович",
text: "Помочь",
big_foto: "http://puzzlecreation.ru/public/puzzles/preview/7/8/7851230827092014.jpg",
mini_foto: "http://puzzlecreation.ru/public/puzzles/preview/7/8/7851230827092014.jpg"
}];
people.forEach(function(item,i) {
var img = $("<img/>", {
src: item.mini_foto,
on: {
click: function() {
$(".show").html("");
$("<h1/>", {
text: item.name
}).appendTo(".show");
$("<img/>", {
src: item.big_foto
}).appendTo(".show");
$("<p/>", {
text: item.text
}).appendTo(".show");
}
}
}).appendTo(".gal")
!i && img.click()
})
});
</script>
</head>
<body>
<div class="gal"></div>
<div class="show"></div>
</body>
</html>