Question

Is it possible to customize the fancybox HTML code?
I want to move out the next and previous buttons outside the .fancybox-outer

Answer 1

Here is how I solved it. I did not know before that you could extend/replace methods in jquery. But this new method will (with some basic css) slide in from the right and out to the left.

It renders the buttons outside of the fancybox-outer element and it takes the width of the documen. It can probably be optimized a lot.

jQuery('ul a').fancybox({
    margin: 0,
    openMethod : 'afterZoomIn',
    nextMethod : 'slideIn',
    nextSpeed : 1000,
    prevMethod : 'slideOut',
    prevSpeed : 1000
});



(function ($, F) {
    var getScalar = function(value, dim) {
        var value_ = parseInt(value, 10);

        if (dim && isPercentage(value)) {
            value_ = F.getViewport()[ dim ] / 100 * value_;
        }

        return Math.ceil(value_);
    },
    getValue = function(value, dim) {
        return getScalar(value, dim) + 'px';
    };

    F.transitions.afterZoomIn = function () {
        var current = F.current;

        if (!current) {
            return;
        }

        F.isOpen = F.isOpened = true;

        F.wrap.addClass('fancybox-opened').css('overflow', 'visible');

        F.reposition();

        // Assign a click event
        if (current.closeClick || current.nextClick) {
            F.inner.css('cursor', 'pointer').bind('click.fb', function(e) {
                if (!$(e.target).is('a') && !$(e.target).parent().is('a')) {
                    F[ current.closeClick ? 'close' : 'next' ]();
                }
            });
        }

        // Create a close button
        if (current.closeBtn) {
            $(current.tpl.closeBtn).appendTo('.fancybox-overlay').bind('click.fb', F.close);
        }

        // Create navigation arrows
        if (current.arrows && F.group.length > 1) {
            if (current.loop || current.index > 0) {
                $(current.tpl.prev).appendTo('.fancybox-overlay').bind('click.fb', F.prev);
            }

            if (current.loop || current.index < F.group.length - 1) {
                $(current.tpl.next).appendTo('.fancybox-overlay').bind('click.fb', F.next);
            }
        }

        F.trigger('afterShow');

        // Stop the slideshow if this is the last item
        if (!current.loop && current.index === current.group.length - 1) {
            F.play( false );

        } else if (F.opts.autoPlay && !F.player.isActive) {
            F.opts.autoPlay = false;

            F.play();
        }
    };

    F.transitions.slideIn = function () {
        var current   = F.current,
            effect    = current.nextEffect,
            startPos  = current.pos,
            endPos    = { opacity : 1 },
            direction = F.direction,
            distance  = $(document).width(),
            field;

        startPos.opacity = 0.1;

        field = 'left';
        if (direction === 'right') {
            startPos[ field ] = getValue(getScalar(startPos[ field ]) - distance);
            endPos[ field ]   = '+=' + distance + 'px';

        } else {
            startPos[ field ] = getValue(getScalar(startPos[ field ]) + distance);
            endPos[ field ]   = '-=' + distance + 'px';
        }

        // Workaround for http://bugs.jquery.com/ticket/12273
        if (effect === 'none') {
            F._afterZoomIn();

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

    F.transitions.slideOut = function () {
        var previous  = F.previous,
            effect    = previous.prevEffect,
            endPos    = { opacity : 0 },
            direction = F.direction,
            distance  = $(document).width();

        if (effect === 'elastic') {
            endPos[ 'left' ] = ( direction === 'left' ? '-' : '+' ) + '=' + distance + 'px';
        }

        previous.wrap.animate(endPos, {
            duration : effect === 'none' ? 0 : previous.prevSpeed,
            easing   : previous.prevEasing,
            complete : function () {
                // $(this).trigger('onReset').remove();
                previous.wrap.trigger('onReset').remove();
            }
        });
    }

}(jQuery, jQuery.fancybox));