JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a id="manual1" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

CSS

.fancybox-nav {
    width: 60px;       
}

.fancybox-nav span {
    visibility: visible;
}

.fancybox-nav:hover span {
    opacity: 1;
}

.fancybox-next {
    right: -50px;
}

.fancybox-prev {
    left: -50px;
}

JavaScript

$(document).ready(function() {
    $("#manual1").click(function() {
        $.fancybox.open([
            {
            href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
            title: 'this image links to bbc news',
            link: 'http://www.bbc.co.uk/news/'},
        {
            href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
            title: 'this image links to jquery',
            link: 'http://jquery.com'},
        {
            href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
            title: 'this image links to fancybox',
            link: 'http://fancyapps.com'}
        ], {
            beforeShow: function() {
                $(".fancybox-image").wrap('<a href="' + this.link + '" />')
            },
            padding: 38,
            nextEffect: 'fade',
            prevEffect: 'fade'
        });
        return false;
    });
}); // ready