KennyMorkovka,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
$("#big img").on("load", function() {
$(this).fadeIn(2E3)
});
$("#small a").click(function(event) {
event.preventDefault();
$("#big img").hide().attr("src", $(this).attr("href"))
})
});
</script>
</head>
<body id="small">
<a href="https://www.w3schools.com/howto/img_fjords.jpg">click</a>
<a href="http://bigtiger.ru/sites/default/files/styles/697x340_new_slider/public/offer/shutterstock_56606173.jpg">click</a>
<!-- The Modal -->
<div id="big" class="modal">
<img class="modal-content" id="img01">
</div>
</body>
</html>