Edit in JSFiddle

$(document).ready(function(){

			console.debug("Doc's ready");

			// Assigns a click listener to all dom elements with a class of .SmallImage
			$(".SmallImage").click(function() {
				// Get the thumbnail's larger version. For the tutorial I use the same image.
				// It looks for the image location in the thumbnails REL attribute
				var image = $(this).attr("rel");

				// Hide the large, full sized, image
				$('.og-fullimg').hide();
				// Edit the HTML of the large image to match the thumbnails larger version
				$('.og-fullimg').html('<img src="' + image + '"/>');
				// Lets fade that new large image back in
				$('.og-fullimg').fadeIn('slow');
				// return false to make sure the browser doesn't do anything 'funky' :)
				return false;
				// Done!
			});

		});

<div class="container">

		<div class="PreviewImageContainer">
			<div class="LargePreviewImageContainer">
				<div class="og-fullimg">
					<img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/1.jpg" alt="" >
				</div>
			</div>

			<div class="SmallPreviewImageContainer">
				<a class="SmallImage" rel="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/1.jpg" href="#">
					<img class="thumb" src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/1.jpg">
				</a>
				<a class="SmallImage" rel="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/2.jpg" href="#">
					<img class="thumb" src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/2.jpg">
				</a>
				<a class="SmallImage" rel="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/3.jpg" href="#">
					<img class="thumb" src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/3.jpg">
				</a>
			</div>
		</div>

	</div> <!-- container -->

/* setup the very basis for the document */
		body {
			text-align:center;
			font-family:'Helvetica Neue';
			font-weight: lighter;
			font-size: 16px;
			background: #dc4600;
			padding-top: 50px;
		}
			a {
				color: #f0f0f0;
				text-decoration: none;
			}
		.container {
			clear: both;
			display: block;
			margin: 0 auto;
			max-width: 1024px;
			min-height: 9000px;
			position: relative;
		}
		/* ANIMATION TRANSITION IF NEEDED */
			.animate {
				-webkit-transition: all 0.35s ease-in-out;
				-moz-transition: all 0.35s ease-in-out;
				-ms-transition: all 0.35s ease-in-out;
				-o-transition: all 0.35s ease-in-out;
				transition: all 0.35s ease-in-out;
			}
		.PreviewImageContainer {
		    display: inline-block;
		    height: 460px;
		    position: relative;
		    text-align: center;
		    width: 330px;
		    margin: 0 auto;
		    border: solid thin #fb6c29;
		    padding: 0 10px;
		}
			.LargePreviewImageContainer {
				margin-top: 10px;
			}
				.LargePreviewImageContainer, .LargePreviewImageContainer .og-fullimg {
				    display: inline-block;
				    height: 330px;
				    text-align: center;
				}
					.LargePreviewImageContainer .og-fullimg img {
					    height: 100%;
					    margin: 0 auto;
					    max-height: 100%;
					    max-width: 100%;
					    width: auto;
					}
			.SmallPreviewImageContainer {
			    bottom: -5px;
			    display: inline-block;
			    height: auto;
			    left: 0;
			    margin: 0;
			    position: absolute;
			    text-align: center;
			    width: 100%;
			    margin-bottom: 10px;
			}
				.SmallPreviewImageContainer .SmallImage {
				    height: auto;
				    margin: 0 5px;
				    max-width: 100px;
				    min-height: 73px;
				}
				.SmallPreviewImageContainer .thumb {
				    max-width: 100px;
				    min-height: 73px;
				}