JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/jdbartlett/loupe/master/jquery.loupe.min.js"></script>
<div class="product-images">
    <div class="featured" style="height: 300px;">
        <a href="http://svenskdistanshandel.se/wp-content/uploads/2013/04/Margarita-Coctail.jpg">
            <img width="300" class="featured-img" src="http://svenskdistanshandel.se/wp-content/uploads/2013/04/Margarita-Coctail.jpg" alt="Full image">
        </a>
    </div>
    <div class="thumbnails">
        <a href="http://svenskdistanshandel.se/wp-content/uploads/2013/04/Margarita-Coctail.jpg" class="active">
            <img height="80" width="80" src="http://svenskdistanshandel.se/wp-content/uploads/2013/04/Margarita-Coctail-80x80.jpg" alt="Thumbnail">
        </a>
        <a href="http://svenskdistanshandel.se/wp-content/uploads/2013/04/image37.jpg" class="">
            <img height="80" width="80" src="http://svenskdistanshandel.se/wp-content/uploads/2013/04/image37-80x80.jpg" alt="Thumbnail">
        </a>
        <a href="http://svenskdistanshandel.se/wp-content/uploads/2013/04/image11-674x900.jpg" class="">
            <img height="80" width="80" src="http://svenskdistanshandel.se/wp-content/uploads/2013/04/image11-80x80.jpg" alt="Thumbnail">
        </a>
    </div>
</div>

JavaScript

$(document).ready(function() {
  
		$('.product-images .thumbnails a').click(function(e) {
			e.preventDefault();

			var fullImgContainer = $('.product-images .featured'),
				fullImgLink = fullImgContainer.find('a'),
				fullImg = fullImgLink.find('img'),
				fullImgSrc = fullImg.prop('src'); 

			var thumbLink = $(this),
				fullSrc = thumbLink.prop('href');

			// Check if image is not already showing
			if(fullImgSrc !== fullSrc) {
				// Get current height of image and set to parent (.featured) This is needed for the animation.
				var currFullImgHeight = fullImg.css('height');
				fullImgContainer.css('height', currFullImgHeight);

				// Change featured image src
				fullImg.prop('src', fullSrc);
				fullImgLink.prop('href', fullSrc);
				fullImg.load(function() {

					// Get new height aftr image has loaded
					var fullImgNewHeight = fullImg.css('height');

					// Animate to new image height
					fullImgContainer.animate({
						height: fullImgNewHeight
					}, 500);

					// Add active class to current thumbnail
					thumbLink.addClass('active');
					thumbLink.siblings().removeClass('active');
				});
			}

		});


		/*
		 * Add image loupe (hover magnifying effect) to product gallery
		*/
		$('.product-images .featured a').loupe();

	});