JSFiddle - React, Tailwind, and code Playground

by 亮 薛

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" href="http://farm6.static.flickr.com/5010/5329485292_03988f30b8_m.jpg" title="Image #1"><img src="http://farm6.static.flickr.com/5010/5329485292_03988f30b8_s.jpg" alt=""/></a>

<a class="fancybox" href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_m.jpg" title="Image #2"><img src="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_s.jpg" alt=""/></a>

JavaScript

(function ($, F) {
    F.transitions.resizeIn = function() {
        var previous = F.previous,
            current  = F.current,
            startPos = previous.wrap.stop(true).position(),
            endPos   = $.extend({opacity : 1}, current.pos);

        startPos.width  = previous.wrap.width();
        startPos.height = previous.wrap.height();

        previous.wrap.stop(true).trigger('onReset').remove();

        delete endPos.position;

        current.inner.hide();

        current.wrap.css(startPos).animate(endPos, {
            duration : current.nextSpeed,
            easing   : current.nextEasing,
            step     : F.transitions.step,
            complete : function() {
                F._afterZoomIn();

                current.inner.fadeIn("fast");
            }
        });
    };

}(jQuery, jQuery.fancybox));

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        nextMethod : 'resizeIn',
        nextSpeed  : 250,
        
        prevMethod : false,
        
        helpers : {
            title : {
                type : 'inside'
            }
        }
    });