popup pictures in a Front end javascript website

I am looking for some help to solve a problem that I am having...

I am playing around with a template I found online and I am trying to use another JavaScript script on the template to change the behavior of the pictures, where once click it displays a modal popup with a picture. The script for that is called fancybox (there are many others that do the same thing as well, tried them as well, same results) However, once I apply the fancybox class to the picture tags, it ruins the sizing of the pictures and layouts.. all pictures start to overlap one another and take up the whole screen.. Moreover, I have also included the js and css links within the website, that is not the problem so do not ask about it please.. Thanks

The location where the template and scirpt can be found are: http://ift.tt/1sTID04 http://fancybox.net/

Moreover, here is the code where I apply the fancybox class tag on

<a href="img/item01.jpg" class="item, fancybox">
    <img class="item__image" src="img/item01.jpg" alt="item01"/>
    <h2 class="item__title">Magnificence</h2>
</a>

<a href="img/item02.jpg" class="item, fancybox">
    <img class="item__image" src="img/item02.jpg" alt="item02"/>
    <h2 class="item__title">Electrifying</h2>
</a>

<!-- ... -->

Any help, would greatly be appreciated. Thanks in advance..