Edit in JSFiddle

<h3>Fancybox demonstrations</h3>
1)<a class="fancybox" href="#inline1">Inline Demo</a>

<br>2)Image thumbnail trigger
<br><a class="fancybox" href="http://picsofcanada.com/wp-content/uploads/2014/03/11wwartsuewilkinslooktothecoast.jpg"
    style='width:50px;'> 
     <!-- NOte that FancyBox ignores this width styling, too bad -->
	<img src="http://picsofcanada.com/wp-content/uploads/2014/03/11wwartsuewilkinslooktothecoast-150x150.jpg" alt="" /><br>
    <b>Click to trigger Fancybox</b>
<div id="inline1" style="width:350px;display: none; border:2px solid red; background-color:tan; text-align:center;">
     <p>Mary Pickford Story:
A book about the Hollywood Silent era.</p>    
    <img src="http://www.peggydymondleavey.com/images/Pickford_cover.png">
</div>

		$(document).ready(function () {
		    $('.fancybox').fancybox({
		        padding: 0,
		        closeClick: true,
		        closeBtn: true,
		        helpers: {
		            title: {
		                type: 'inside'
		            },
		            buttons: {}
		        }
		    });
		});