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">
<ul>
    <li><a class="fancybox" data-width="660" data-height="700" href="http://jsfiddle.net"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg"  border="0" /></a></li>
    <li><a class="fancybox" data-width="660" data-height="1870" href="http://jsfiddle.net"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg"  border="0"  /></a></li>
</ul>

CSS

ul {
    list-style-type: none;
}
li, a {
    float: left;
}
img {
    border: 0 none;
    padding: 5px;
}

JavaScript

// answer to http://stackoverflow.com/q/15033964/1055987
// JFK - http://stackoverflow.com/users/1055987/jfk
$(".fancybox").fancybox({
    //  the following options are NOT valid for v2.x
    // 'autoScale': 'false',
    // 'autoDimensions': 'false',
    // 'transitionIn': 'true',
    // 'transitionOut': 'true'
    openEffect: 'fade',
    openSpeed: 1500,
    closeEffect: 'fade',
    closeSpeed: 400,
    padding: '0',
    scrolling: 'no',
    fitToView: false,
    autoSize: false,
    closeClick: false,
    type: "iframe",
    beforeShow: function () {
        this.width  = $(this.element).data("width");
        this.height = $(this.element).data("height");
    }
});