JSFiddle - React, Tailwind, and code Playground

by ritz

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<article id="loop-news">
	<h2>
	<a href="#show" class="x" >Title of my first post</a><br />
	</h2>
	<span>Tuesday<strong>,</strong> 8 April 2014</span> 
	<p>My first post content is this!</p>
	<a class="buttonl" href="#show"> Read more</a>

    <div id="show">
      <h2>IM the fancybox content!!</h2>
    </div>
</article>

<hr>
    
<article id="loop-news">
	<h2>
	<a href="#show" class="x">Post with pdf</a><br />
	</h2>
	<span>Tuesday<strong>,</strong> 8 April 2014</span> 
	<p>My first post with pdf!</p>
	<a class="buttonl" href="#show"> Read more</a>

    <div id="show">
      <a href="../design_multimedia_metodologia.pdf"></a>
    </div>
</article>

CSS

#show{display:none;}

JavaScript

$(document).ready(function() {
	$("a.buttonl").fancybox({
		maxWidth	: 800,
		fitToView	: false,
		width		: '70%',
		height		: '70%',
		autoSize	: false,
		closeClick	: false,
		openEffect	: 'elastic',
		closeEffect	: 'elastic'
		
		
	});
})