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">
<a class="fancybox" rel="gallery1" href="www.google.com" >Image</a>

https://katikati.files.wordpress.com/2015/10/poster-readaloud.jpg
https://katikati.files.wordpress.com/2015/10/poster-pi.jpg
https://katikati.files.wordpress.com/2015/10/poster-enigma.jpg
https://katikati.files.wordpress.com/2015/10/poster-cannabis.jpg



<a class="fancybox hidden" rel="gallery1" href="https://katikati.files.wordpress.com/2015/10/poster-readaloud.jpgs">Video</a>
 
<a class="fancybox hidden" rel="gallery1" href="https://katikati.files.wordpress.com/2015/10/poster-adas-fourth.jpg">Image</a> 

<a class="fancybox hidden" rel="gallery1" href="https://katikati.files.wordpress.com/2015/10/poster-bucky.jpg">Image</a>
<a class="fancybox hidden" rel="gallery1" href="https://katikati.files.wordpress.com/2015/10/poster-enigma.jpg">Image</a>
<a class="fancybox hidden" rel="gallery1" href="https://katikati.files.wordpress.com/2015/10/poster-cannabis.jpg">Image</a>
<a class="fancybox hidden" rel="gallery1" href="https://katikati.files.wordpress.com/2015/10/poster-pi.jpg">Image</a>

CSS

.fancybox-type-iframe .fancybox-nav {
    width: 10%;
    height: 70%;
    margin: 15% 0;
}

.hidden{
    display: none;
}

JavaScript

$(document).ready(function () {
    $('.fancybox').fancybox();
});