JSFiddle - React, Tailwind, and code Playground

by Ennio Sousa Sousa

HTML

<script src="http://s102.ucoz.net/src/ulightbox/ulightbox.js"></script>
<link rel="stylesheet" href="http://s102.ucoz.net/src/ulightbox/ulightbox.css">
<ul class="list">
	<li>
		<a class="various fancybox.ajax" href="/demo/ajax.php">Ajax</a>
	</li>
	<li>
        <a class="various" data-fancybox-type="iframe" href="http://google.com">Iframe</a>
	</li>
    <li>
        <a class="various fancybox.iframe" href="http://google.com">Iframe 2</a>
	</li>
	<li>
		<a class="various" href="#inline">Inline</a>
	</li>
	<li>
		<a class="various" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">SWF</a>
	</li>
</ul>

<ul class="list">
	<li>
		<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
	</li>
	<li>
		<a class="various fancybox.iframe" href="http://maps.google.com/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google maps (iframe)</a>
	</li>
	<li>
		<a class="various" href="/data/non_existing_image.jpg">Non-existing url</a>
	</li>
</ul>

JavaScript

$(document).ready(function() {
	$(".various").fancybox({
		maxWidth	: 800,
		maxHeight	: 600,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'none',
		closeEffect	: 'none'
	});
});