zylios,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.overlay, .modal {
width: 100%;
height: 100%;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #DCDCDC;
}
.modal{
margin: auto;
width: 50%;
height: auto;
}
.modal img{
margin: auto;
width: 100%;
height: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var $body = $("body");
var $link = $(".list-item");
var $modal;
var $overlay;
$modal = $('<div class="modal"></div>').hide();
$overlay = $('<div class="overlay"></div>').hide();
$body.append($overlay);
$body.append($modal);
$overlay.on("click", hideModal);
function hideModal() {
$modal.hide();
$overlay.hide()
}
$link.each(function(i, el) {
var src = $(".big", el).attr("href");
var img = $("<img>", {
"src": src
});
$(el).on("click", function(e) {
e.preventDefault();
$modal.html(img);
$modal.show();
$overlay.show()
})
})
});
</script>
</head>
<body>
<div class="wrapper">
<ul>
<li class="list-item"><a href="http://s00.yaplakal.com/pics/pics_original/6/8/7/651786.jpg" class="big">
<img src="http://i.io.ua/img_su/small/0062/40/00624089_n1.jpg" alt="" class="im">
</a>
</li>
<li class="list-item"><a href="http://www.photoclub.com.ua/_/106741.jpeg?0" class="big">
<img src="http://i.io.ua/img_su/small/0062/40/00624089_n1.jpg" alt="" class="im">
</a>
</li>
</ul>
</div>
</body>
</html>