JSFiddle - React, Tailwind, and code Playground

by borayeris

HTML

<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

<a class="sizeButton">SIZE</a>

CSS

.sizeButton{padding:5px ; background:rgba(255,255,255,0.5); color:black; position:absolute; z-index:9999; top:10px; left:10px;display:none;}
.sizeButton:hover{background:rgba(255,255,255,0.8); cursor:pointer;}

JavaScript

$(".fancybox").attr('rel', 'gallery').fancybox({
    padding : 0,
    afterLoad: function() {
        $("body").append('<a class="sizeButton">SIZE</a>');
        $(".sizeButton").css("display","block");
    },            
    afterClose: function() { $(".sizeButton").css("display","none"); }
});

$(document).on('click','.sizeButton',function(e){
    e.preventDefault();
    $('.fancybox-wrap').css({
        'width': '100%',
        'height': '100%',
        'left': '0',
    });
    $('.fancybox-inner').css({
        'width': '100%',
        'height': '100%',
        'left': '0',
    });
});