移动 'toggle size' 按钮 fancybox

Question

我目前正在使用 fancybox 缩略图和按钮的组合（只有切换大小按钮）。默认情况下，按钮出现在视口的中央，我想将其移动到图像的右下角，基本上以与关闭按钮相同的方式出现，或者就在右下角也可以.

我已经尝试 space 相对于视口宽度，但它不起作用。有没有办法相对于图像定位它？

对于代码过多，我深表歉意 - 我不知道该包括什么，该忽略什么，所以我把它们都写进去了。

如果您查看我的网站（未完成但我已将其上传以提供帮助），您可以在画廊一上看到该问题。

Shereewalker.com

非常感谢任何帮助。

这是我的 css

    #fancybox-buttons {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 8050;}


#fancybox-buttons.top {top: 10px;}

#fancybox-buttons.bottom {bottom: 10px;}

.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040; }

#fancybox-buttons ul {
    width: 36px;
    height: 36px;
    cursor: pointer;
    margin: 0 auto;
    list-style: none;}


#fancybox-buttons ul li {
    float: left;
    margin: 0;
    padding: 0;}

还有我的javascript

    jQuery(document).ready(function ($) {
   $(".fancybox").fancybox({
    prevEffect  : 'none',
        nextEffect  : 'none',

       // API options
       helpers : {
                title   : {
                type: 'outside'
                            },

           buttons: {},
           thumbs: {
            width   : 10,
                height  : 10

           }
       }
   }); // fancybox
}); // ready

还有更多javascript

(function ($) {
    //Shortcut for fancyBox object
    var F = $.fancybox;

    //Add helper object
    F.helpers.buttons = {
        defaults : {
            skipSingle : false, // disables if gallery contains single image
            position   : 'top', // 'top' or 'bottom'
            tpl        : '<div id="fancybox-buttons"><ul><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li></ul></div>'
        },

        list : null,
        buttons: null,

        beforeLoad: function (opts, obj) {
            //Remove self if gallery do not have at least two items

            if (opts.skipSingle && obj.group.length < 2) {
                obj.helpers.buttons = false;
                obj.closeBtn = true;

                return;
            }

            //Increase top margin to give space for buttons
            obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
        },

        onPlayStart: function () {
            if (this.buttons) {
                this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
            }
        },

        onPlayEnd: function () {
            if (this.buttons) {
                this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
            }
        },

        afterShow: function (opts, obj) {
            var buttons = this.buttons;

            if (!buttons) {
                this.list = $(opts.tpl).addClass(opts.position).appendTo('body');

                buttons = {
                    prev   : this.list.find('.btnPrev').click( F.prev ),
                    next   : this.list.find('.btnNext').click( F.next ),
                    play   : this.list.find('.btnPlay').click( F.play ),
                    toggle : this.list.find('.btnToggle').click( F.toggle ),
                    close  : this.list.find('.btnClose').click( F.close )
                }
            }

            //Prev
            if (obj.index > 0 || obj.loop) {
                buttons.prev.removeClass('btnDisabled');
            } else {
                buttons.prev.addClass('btnDisabled');
            }

            //Next / Play
            if (obj.loop || obj.index < obj.group.length - 1) {
                buttons.next.removeClass('btnDisabled');
                buttons.play.removeClass('btnDisabled');

            } else {
                buttons.next.addClass('btnDisabled');
                buttons.play.addClass('btnDisabled');
            }

            this.buttons = buttons;

            this.onUpdate(opts, obj);
        },

        onUpdate: function (opts, obj) {
            var toggle;

            if (!this.buttons) {
                return;
            }

            toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');

            //Size toggle button
            if (obj.canShrink) {
                toggle.addClass('btnToggleOn');

            } else if (!obj.canExpand) {
                toggle.addClass('btnDisabled');
            }
        },

        beforeClose: function () {
            if (this.list) {
                this.list.remove();
            }

            this.list    = null;
            this.buttons = null;
        }
    };

}(jQuery));

Answer 1

切换大小按钮（和缩略图）很难对齐，因为它们位于单独的全角容器中。此标记由 FancyBox 为图库幻灯片生成。

看起来像这样：

<body>
    <div class="fancybox-wrap">
    <div class="fancybox-overlay">
    <div id="fancybox-buttons">
    <div id="fancybox-thumbs">

.fancybox-wrap 包含图库图像，#fancybox-buttons 包含切换大小按钮。

幸运的是，OP 正在为切换大小按钮创建一个模板 (tpl)...但是将其注入 <body> 所以它不知道 .fancybox-wrap.

要解决此问题，只需更改此行：

this.list = $(opts.tpl).addClass(opts.position).appendTo('body');

为此：

this.list = $(opts.tpl).addClass(opts.position).appendTo('.fancybox-wrap');

这只是将按钮放在与图库图像相同的容器中（这也是我们想要对齐的）。

Answer 2

如果您只想移动按钮，您实际上需要克隆而不是移动它。

基于这个答案，我们可以将其调整为：

CSS

/* hide the actual buttons helper */ #fancybox-buttons { display: none; } /* position the clone : notice the class "clone" */ .clone { position: absolute; top: 5px; right: 0; } .btnToggle.clone { background-position: 3px -60px; border-left: 1px solid #111; border-right: 1px solid #3e3e3e; width: 35px; height: 35px; background-image: url("{your path}/helpers/fancybox_buttons.png"); background-color: #333; } .clone.btnToggleOn { background-position: -27px -60px; }

然后jQuery代码：

jQuery(document).ready(function ($) { $(".fancybox").fancybox({ helpers: { title: { type: 'inside' }, buttons: {} // we need this to clone }, afterLoad: function () { // make sure we have a title this.title = this.title ? this.title : " "; }, afterShow: function () { // wait for the buttons helper setTimeout(function () { $("#fancybox-buttons") .find(".btnToggle") .clone(true, true) // clone with data and events .addClass("clone") // add class "clone" .appendTo(".fancybox-title") // append it to the title .fadeIn(); // show it nicely }, 100); //setTimeout }, // afterShow onUpdate: function () { var toggle = $(".btnToggle.clone").removeClass('btnDisabled btnToggleOn'); if (this.canShrink) { toggle.addClass('btnToggleOn'); } else if (!this.canExpand) { toggle.addClass('btnDisabled'); } } }); // fancybox }); // ready

见JSFIDDLE

移动 'toggle size' 按钮 fancybox

Move 'toggle size' button fancybox

html

javascript

css

fancybox

fancybox-2