JSFiddle - React, Tailwind, and code Playground

by ktpmm5

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
        <h3 class="link"><a class="fancybox"  data-fancybox-type="iframe" data-width="400" data-height="400" href = "http://samplepdf.com/sample.pdf">Test PDF</a></h3> 

<a class="fancybox" caption="This is 1st title" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

JavaScript

$(".fancybox").fancybox({
	    openEffect  : 'none',
	    closeEffect : 'none',
	    fitToView: false,
	    scrolling: 'yes',
    type: 'iframe',
    iframe: { preload: false },
    autoSize: false,
    afterLoad: function () {
        this.width = $(this.element).data("width");
        this.height = $(this.element).data("height");
    },

 	});