javascript - ファンシーボックスのhtmlを修正

Question

fancybox の HTML コードをカスタマイズすることはできますか?
次と前のボタンを .fancybox-outer の外側に移動したい

Answer 1

nextコンテナーのボタンとpreviousボタンを移動するには.fancybox-outer、これらの CSS ルールを追加する必要があります (独自のカスタム CSS ファイルに、fancybox CSS ファイルをロードした後)。

.fancybox-nav {
    width: 60px;       
}

.fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}

.fancybox-nav:hover span {
    opacity: 1;
}

.fancybox-next {
    right: -60px;
}

.fancybox-prev {
    left: -60px;
}

あなたは言っyou have looked around in the documentation but haven't found anythingたが、上記はfancyapps.comのウェブサイトで十分に文書化されている --> http://fancyapps.com/fancybox/#useful check No. 6, and the demo is in this fiddle

...でも、これを正解と考えるかどうかは疑問です。

Answer 2

これが私がそれを解決した方法です。jqueryでメソッドを拡張/置換できることを以前は知りませんでした。しかし、この新しいメソッドは (いくつかの基本的な css を使用して) 右から左にスライドインします。

fancybox-outer 要素の外側にボタンをレンダリングし、ドキュメントの幅を取ります。おそらく、多くの最適化が可能です。

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));