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 class="fancybox" href="#page1" rel="gallery"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<div style="display: none"> 
    <a class="fancybox" href="#page2" rel="gallery"></a>
    <a class="fancybox" href="#page3" rel="gallery"></a>

    <div id="page1">page 1 text lorem ipsum</div>
    <div id="page2">page 2 content and more content</div>
    <div id="page3">page 3 text blah, blah, blah</div>
</div>

JavaScript

$(".fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    nextEffect: 'none',
    prevEffect: 'none',
    nextSpeed: 0,
    prevSpeed: 0,
    preload: 3,
    padding: 15
    // 'speedIn'     :   0, // not a valid option for v2.x
    //'speedOut'    :   0, // not a valid option for v2.x
    //'overlayShow' :   true // not a valid option for v2.x
});