Image zoom in jQuery.Fancybox

How to put a zoom button in fancybox to see images in full size.

HTML

<link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css">
<script src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
<p>
    <a id="example1" href="http://tng1.arrowhitech.net/Satay/wp-content/uploads/2018/03/stall-01-02.jpg">
        <img alt="example1" src="http://tng1.arrowhitech.net/Satay/wp-content/uploads/2018/03/stall-01-02.jpg" />
    </a>
</p>
<p>
    <a rel="example_group" title="Custom title" href="http://tng1.arrowhitech.net/Satay/wp-content/uploads/2018/03/stall-01-02.jpg">
        <img alt="" src="http://tng1.arrowhitech.net/Satay/wp-content/uploads/2018/03/stall-01-02.jpg" />
    </a>
    <a rel="example_group" title="" href="http://tng1.arrowhitech.net/Satay/wp-content/uploads/2018/03/stall-01-02.jpg">
        <img alt="" src="http://tng1.arrowhitech.net/Satay/wp-content/uploads/2018/03/stall-01-02.jpg" />
    </a>
    <a rel="example_group" title="" href="http://farm3.static.flickr.com/2561/4048285842_90b7e9f8d1.jpg">
        <img alt="" src="http://farm3.static.flickr.com/2561/4048285842_90b7e9f8d1_s.jpg" />
    </a>
    (Image gallery)
</p>
<p>
    Put your mouse on the image in fancybox :)<br>
    (The zoom button only appears if the image is not maximized, so make this area small to see the button.)<br>
    (Well, the style of the zoom button is not so good, but you can make it as you like)
</p>
<p>
    Based on jlgrall's jQuery.Fancybox Test <a href="http://jsfiddle.net/jlgrall/BZvwD/" class="no-fancybox">http://jsfiddle.net/jlgrall/BZvwD/</a>
</p>

CSS

#fancybox-fullsize {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: #CCC;
    display: none;
    filter: alpha(opacity=50);
    opacity: 0.5;

}

#fancybox-content:hover #fancybox-fullsize {
    display: block;
}

#fancybox-fullsize:hover {
    filter: alpha(opacity=100);
    opacity: 1;
}

#fancybox-fullsize-data {
    display: none;
}

JavaScript

var last_currentOpts = {},
    last_pos = 0,
    titleFormat = function(titleStr, currentArray, currentIndex, currentOpts) {
        titleStr = '<div id="fancybox-title-' + currentOpts.titlePosition + '">' + titleStr + '<\/div>';
        last_currentOpts = currentOpts;
        last_pos = currentIndex;
        return titleStr;
    },
    Elem_fancybox_content = $("#fancybox-content"),
    Elem_fancybox_fullsize = $("<div>", {id: "fancybox-fullsize"}).click(function() {
        $.fn.fancybox.defaults.autoScale = !$.fn.fancybox.defaults.autoScale;
        $.fancybox.pos(last_pos);
    });
$.fn.fancybox.defaults.onComplete = function() {
    if(last_currentOpts.type == "image") {
        var width = Elem_fancybox_content.width(),
            height = Elem_fancybox_content.height();
        if($.fn.fancybox.defaults.autoScale && (width < last_currentOpts.width || height < last_currentOpts.height)) {
            Elem_fancybox_fullsize.text("Zoom");
        }
        else if(!$.fn.fancybox.defaults.autoScale) {
            Elem_fancybox_fullsize.text("Fit");
        }
        else return;
        Elem_fancybox_fullsize.appendTo(Elem_fancybox_content);
    }
}
$.fn.fancybox.defaults.onCleanup = function() {
    Elem_fancybox_fullsize.detach();
};
$.fn.fancybox.defaults.onClosed = function() {
    $.fn.fancybox.defaults.autoScale = true;
};

$("a:not(.no-fancybox)").each(function() {
    $(this).fancybox({
        transitionIn: "elastic",
        transitionOut: "elastic",
        overlayShow: false,
        orig: $("img", this),
        titlePosition: "inside",
        titleFormat: titleFormat
    });
});