JSFiddle - React, Tailwind, and code Playground
HTML
<img src="/cms_files/www.goodwood.co.uk/images/Members-Meeting/races/mm-785x258-gerry.jpg" width="785" title="mm-785x258-gerry" contentversionid="266652" id="CMS_IMG986a4fb9819c4d7888d37b9f384daf1a" height="258" alt="mm-785x258-gerry" contenteditable="true">
<div>
<h1>
The RACES
</h1>
<div class="driver-container">
<div>
<h3>
Races One & Seven<br>
<em>Marshall Trophy</em>
</h3>
<a id="CMS_Ac79d92dde4ba481497a69c562f8695e2" externalhref="#data" class="inline"><img src="/cms_files/www.goodwood.co.uk/images/Members-Meeting/races/1974ttgm01942-147x197.jpg" width="147" title="1974ttgm01942-147x197" contentversionid="266628" id="CMS_IMG4d65481663d545d1b920ddc9c4bd392b" height="197" alt="1974ttgm01942-147x197" contenteditable="true">
</a>
</div>
<div>
<h3>
Race Two<br>
<em>Threlfall Cup </em>
</h3>
<a id="CMS_A66a72937e85c43c2858f197097651fbe" externalhref="#data2" class="inline"><img src="/cms_files/www.goodwood.co.uk/images/Members-Meeting/races/Threfall-147x197.jpg" width="147" title="Threfall-147x197" contentversionid="266630" id="CMS_IMGbb0e96939ea14310950334b4747dc211" height="197" alt="Threfall-147x197" contenteditable="true">
</a>
</div>
<div>
<h3>
Race Three<br>
<em>Moss Trophy</em>
</h3>
<a id="CMS_A8f0bd2824b11403bb2e5969d756607f5" externalhref="#data3" class="inline"><img src="/cms_files/www.goodwood.co.uk/images/Members-Meeting/races/Moss-147x197.jpg" width="147" title="Moss-147x197" contentversionid="266632" id="CMS_IMG2dfa2fd713fa43a39b00a33d1b555885" height="197" alt="Moss-147x197" contenteditable="true">
</a>
</div>
<div>
<h3>
Race Four<br>
<em>Tony Gaze Trophy</em>
</h3>
...
JavaScript
// CMS specific javascript
(function ($) {
$(document).ready(function () {
$('.races-thumbnail').live("click", function (e) {
var racesmainimage = $('.races-main-image', $(e.target).closest('.races-fancy-box'));
var racesimagewrap = $('.races-image-wrap', $(e.target).closest('.races-fancy-box'));
racesmainimage.hide();
racesimagewrap.css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
racesmainimage.attr('src', i.attr('src'));
racesimagewrap.css('background-image', 'none');
racesmainimage.fadeIn();
});
return false;
});
$(".races-image-wrap img").toggle(function () { //fired the first time
$(".races-pop-info").show();
$(this).animate({
width: "259px",
height: "349px"
});
}, function () { // fired the second time
$(".races-pop-info").hide();
$('.races-main-image').animate({
width: "720px",
height: "970px"
});
});
$('#fancybox-overlay, #fancybox-close').live("click", function () {
$(".races-pop-info").show();
$(".races-main-image").animate({
width: "259px",
height: "349px"
});
});
});
})(jQuery);