JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<link rel="stylesheet" href="https://isurveys.researchresults.com/ui/fancybox/jquery.fancybox-1.3.4.css">
<script src="https://isurveys.researchresults.com/ui/fancybox/jquery.fancybox-1.3.4.js"></script>
<div id="fullBrochure" style="display: block;">
    <div id="thumbWrapper" style="cursor: all-scroll; margin-left: 0px;"> <a href="https://surveys..com/legacy/056/0592/frontLarge.jpg" class="fancy" target="_blank" title=""><span class="innerText" style=
      "cursor: all-scroll;">Front Cover</span></a>

        <div id="frontCover" style="cursor: all-scroll;">
            <img src="https://surveys..com/legacy/056/0592/frontThumb.jpg" />
        </div><span class="Zoom" style="cursor: all-scroll;">ZOOM</span>

    </div>
    <div id="thumbWrapper" style="cursor: all-scroll;"> <a href="https://surveys..com/legacy/056/0592/insideLarge.jpg" class="fancy" target="_blank" title=""><span class="innerText" style=
      "cursor: all-scroll;">Inside (fully opened)</span></a>

        <div id="frontCover" style="cursor: all-scroll;">
            <img src="https://surveys..com/legacy/056/0592/insideThumb.jpg" />
        </div><span class="Zoom" style="cursor: all-scroll;">ZOOM</span>

    </div>
    <div id="thumbWrapper" style="cursor: all-scroll;"> <a href="https://surveys..com/legacy/056/0592/flapLarge.jpg" class="fancy" target="_blank" title=""><span class="innerText" style=
      "cursor: all-scroll;">Inside Flap</span></a>

        <div id="frontCover" style="cursor: all-scroll;">
            <img src="https://surveys..com/legacy/056/0592/flapThumb.jpg" />
        </div><span class="Zoom" style="cursor: all-scroll;">ZOOM</span>

    </div>
    <div id="thumbWrapper" style="cursor: all-scroll;"> <a href="https://surveys..com/legacy/056/0592/backLarge.jpg" class="fancy" target="_blank" title=""><span class="innerText" style=
      "cursor: all-scroll;">Back Cover</span></a>

        <div id="frontCover" style="cursor: all-scroll;">
            <img...

CSS

div#fullBrochure
	{
		cursor:zoom-in;
		width: 945px;
		min-width: 230px;
		min-height: 270px;
		max-height: auto;
		overflow: visible;
		text-align: left;
		clear:both;
		margin:15px auto;
		border: none;
		display: none;
		position: relative;
	}

	#thumbWrapper
	{
		width: 215px !important;
		height: 324px !important;
		min-width: 215px !important;
		max-width: 215px !important;
		min-height:  324px !important;
		max-height:  324px !important;
		display: inline-block;
		clear: none;
		padding: 0px;
		margin-left: 20px;
		border: dashed 1px #CCC;
		overflow: hidden;
		position: relative;
		cursor: zoom-in;
	}
	
	#frontCover, #insideOpen, #insideFlap, #backCover 
	{
		width: 215px !important;
		height: 270px !important;
		min-width: 215px !important;
		max-width: 215px !important;
		min-height:  270px !important;
		max-height:  270px !important;
		display: block;
		clear: both;
		padding: 0px;
		overflow: hidden;
		cursor: zoom-in;
	}

	.innerText, .Zoom, a.innerText, a.Zoom, span.innerText, span.Zoom
	{
		display: block;
		width: 215px !important;
		height: 20px !important;
		font-weight: normal;
		font-size: .75em;
		text-align: center;
		clear: both;
		color: blue;		
		padding: 6px 0px 1px 0px;
		margin: 0px;
		text-decoration: none;
		background-color: #ACC;
		position: relative;
		overflow: hidden;
		cursor: zoom-in;
	}
	
	a.img, img, div.img, a
	{
		border:none;
		text-decoration: none;
	}
	
	#clickBrochure
	{
		text-decoration: underline;
		color: blue;
		clear: both;
		position: relative;
		display: block;
		cursor: pointer;
		height: 20px;
		margin-bottom: 20px;
	}
	
	.currentlyDown
	{
		
	}
	
	#arrowID
	{
		text-decoration: none;
		color: green;
		display: inline-block;
		clear: none;
		height: 20px;
		overflow: hidden;
	}
	
	.Timers {background-color: yellow;}
	
	.nextText
	{
		background-color: red !important;
		color: #FFF !important;
		background-image: none !important;
		text-indent: 0 !important;
	}

JavaScript

$.getScript("https://isurveys.researchresults.com/ui/fancybox/jquery.fancybox-1.3.4.js", function () {
    $('a.fancy').fancybox();
});

			var TimerBox = jQuery('input[type=text]'),
			frontCover = $('table.mrQuestionTable td span:contains(Front Cover:)').closest('td').next().find(TimerBox).addClass('Timers'),
			insideOpen = $('table.mrQuestionTable td span:contains(opened)').closest('td').next().find(TimerBox).addClass('Timers'),
			insideFlap = $('table.mrQuestionTable td span:contains(Inside flap:)').closest('td').next().find(TimerBox).addClass('Timers'),
			backCover = $('table.mrQuestionTable td span:contains(Back cover:)').closest('td').next().find(TimerBox).addClass('Timers'),
			frontImage = $('div#thumbWrapper:eq(0)'),
			insideImage = $('div#thumbWrapper:eq(1)'),
			flapImage = $('div#thumbWrapper:eq(2)'),
			backImage = $('div#thumbWrapper:eq(3)'),
			frontVar = [0],
			insideVar = [0],
			flapVar = [0],
			backVar = [0],
			delay = 100,
			fancyOpen = false;
			
			$('div#thumbWrapper').mouseenter(function () {
				fancyOpen = true;
			});

			$('div#thumbWrapper').mouseleave(function () {
				fancyOpen = false;
			});
			
			frontImage.click(function () {				
				if(fancyOpen === true)
				{
					var TimerStart = setInterval(function(e) {
						frontVar[0] = frontVar[0] + delay;
						frontCover.val(frontVar/100);
						if($('#fancybox-overlay').is(":visible") == true)
						{
							frontCover.css("background-color", "green");
						} 
						else
						{
							clearInterval(TimerStart);
							frontCover.val(frontCover.val() - 1);
							backCover.css("background-color", "yellow")
						}
					}, 1000);
					
					TimerStart                    
				}
			});
			
			insideImage.click(function () {				
				if(fancyOpen === true)
				{
					var TimerStart = setInterval(function(e) {
						insideVar[0] = insideVar[0] + delay;
						insideOpen.val(insideVar/100);
						if($('#fancybox-overlay').is(":visible") ==...