JSFiddle - React, Tailwind, and code Playground

by joshkrz

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 href="http://tabbidesign.com/audio/" class="threadstatus" >Click here to test</a>

CSS

.fancybox-type-iframe .fancybox-nav {
    width: 60px;       
}

.fancybox-type-iframe .fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}

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

.fancybox-type-iframe .fancybox-next {
    right: -60px;
}

.fancybox-type-iframe .fancybox-prev {
    left: -60px;
}

JavaScript

// Fancy Box 2
	$(document).ready(function() {

$(".threadstatus").fancybox({
		fitToView	: false,
		width		: '300px',
		height		: '335px',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
                margin          : [20, 60, 20, 60],
                padding         : 0,
		closeEffect	: 'none',
                type            : "iframe",
               iframe:
{
	scrolling : 'no',
	preload   : false
}
	});
        
});