Supersized fancyBox

by bizamajig

HTML

<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="https://raw.github.com/fancyapps/fancyBox/master/source/jquery.fancybox.js"></script>
<a class="fancybox" href="http://farm8.staticflickr.com/7171/6417719753_374653e28c_b.jpg"><img src="http://farm8.staticflickr.com/7171/6417719753_374653e28c_m.jpg" alt=""/></a>

<a class="fancybox" href="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg"><img src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg" alt=""/></a>

CSS

.fancybox-close {
    top: 0;
    right: 0;
}

JavaScript

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding    : 0,
        margin     : 5,
        nextEffect : 'fade',
        prevEffect : 'none',
        afterLoad  : function () {
            $.extend(this, {
                aspectRatio : false,
                type    : 'html',
                width   : '100%',
                height  : '100%',
                content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
            });
        }
    });