JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
<div class="gallery">
    <div id="panel" class="panel"><a href="http://bloc-nc.com/projects/images/gateway/gateway1_zoom.png" class="zoom"><img src="http://bloc-nc.com/projects/images/gateway/gateway1_large.png" id="largeImage" /></a>

    </div>
    <!--<div id="description">1st image description</div>-->
    <div id="thumbs">
        <img alt="1st image description" src="http://bloc-nc.com/projects/images/gateway/gateway1_thumb.png" />
        <img alt="2nd image description" src="http://bloc-nc.com/projects/images/gateway/gateway2_thumb.png" />
    </div>
</div>

CSS

#thumbs img, #largeImage {
    background-color: white;
    cursor: pointer;
}
#panel {
    position: relative;
}
.gallery {
    float: left;
    margin: 0 20px 10px 0;
    width: 300px;
}

JavaScript

// ref : http://stackoverflow.com/q/15507415/1055987
// by JFK - http://stackoverflow.com/users/1055987/jfk
$(document).ready(function () {
    $("#thumbs img").each(function (i) {
        $(this).click(function () {
            var imgPanel = '<a href="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_zoom.png" class="zoom" tabindex="' + (i + 1) + '"><img src="http://bloc-nc.com/projects/images/gateway/gateway' + (i + 1) + '_large.png" id="largeImage" /></a>';
            $("#panel").html(imgPanel);
        }); // click
    }); // each
    // initialize fancybox for dynamically added elements
    $(".gallery").delegate("#panel", "focusin", function () {
        $("a.zoom").fancybox();
    });
}); // ready