fancybox Plugin for jQuery
From fancybox.net: FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
Here I trigger a fancybox to open by code rather than a user click.
HTML
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<article class="loop-news">
<h2>Title</h2>
<span>Date of today</span>
<p>content of my article</p>
<a class="fancybox" href="#show">Read more</a>
<div class="fancybox-container">
<div id="show">
<h2>Title</h2>
<span>Date of today</span>
<p>content of my news</p>
<!--here I have some pdfs inside fancybox, that will open other fancybox-->
<div class="pdfs">
<li><a class="fancybox_pdf" href="pdf1.pdf">Title of pdf</a></li>
<li><a class="fancybox_pdf" href="pdf1.pdf">Title of pdf</a></li>
</div>
</div>
</div>
</article>
CSS
.fancybox-container{
display:none;
}
JavaScript
$(document).ready(function() {
var last;
$(".fancybox").fancybox({
maxWidth : 800,
fitToView : false,
width : '100%',
height : '100%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'elastic'
}).click(function() {
last = $(this);
});