misterX_,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(function() {
var $img = $("#photoContainer img"),
$large = $('#largeImage');
$large.load(function() {
$large.fadeIn("slow")
})
$img.click(function() {
var src = this.src.replace('thumb', 'lg');
new Image().src = src;
$large.fadeOut("slow", function() {
this.src = src;
this.complete && $(this).load()
})
});
});
</script>
</head>
<body>
<div id="photoContainer">
<img src="https://js.cx/gallery/img2-thumb.jpg">
<img src="https://js.cx/gallery/img3-thumb.jpg">
<img src="https://js.cx/gallery/img4-thumb.jpg">
<img src="https://js.cx/gallery/img5-thumb.jpg">
<img src="https://js.cx/gallery/img6-thumb.jpg">
</div>
<img src="https://js.cx/gallery/img2-lg.jpg" id="largeImage">
</body>
</html>