Javascript 移动'；切换大小'；按钮盒

我目前正在使用fancybox缩略图和按钮的组合（仅使用“切换大小”按钮）。默认情况下，按钮显示在视口的中心，我想将其移动到图像的右下角，基本上以与关闭按钮相同的方式附着，或者在右下角也可以

我尝试将其相对于视口宽度隔开，但不起作用。有没有一种方法可以将其相对于图像进行定位

我为代码的丰富性道歉——我不知道应该包括什么，也不知道应该忽略什么，所以我把它们都放进去了

如果您查看我的网站（未完成，但我已将其上载以提供帮助），您可以在gallery one上看到该问题

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

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

还有更多的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

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

（函数（$）{
//fancyBox对象的快捷方式
var F=$.fancybox；
//添加辅助对象
F.helpers.buttons={
默认值：{
skipSingle:false，//如果库包含单个图像，则禁用
位置：“顶部”、“顶部”或“底部”
第三方物流：“
”
},
列表：空，
按钮：空，
加载前：功能（选项，obj）{
//如果库中至少没有两个项目，请删除self
if（opts.skipSingle&&obj.group.length<2）{
obj.helpers.buttons=false；
obj.closeBtn=真；
返回；
}
//增加顶部边距，为按钮留出空间
对象边距[选择位置=='底部'？2:0]+=30；
},
onPlayStart:函数（）{
如果（此按钮）{
this.buttons.play.attr（'title'，'Pause slideshow'）.addClass（'btnPlayOn'）；
}
},
onPlayEnd:函数（）{
如果（此按钮）{
this.buttons.play.attr（'title'，'Start slideshow'）.removeClass（'btnPlayOn'）；
}
},
后演示：功能（选项，obj）{
var buttons=this.buttons；
如果（！按钮）{
this.list=$（opts.tpl）.addClass（opts.position）.appendTo（'body'）；
按钮={
prev:this.list.find（'.btnPrev'）。单击（F.prev），
下一步：this.list.find（'.btnNext'）。单击（F.next），
播放：此.list.find（'.btnPlay'）。单击（F.play），
切换：this.list.find（'.btntogle'）。单击（F.toggle），
关闭：此.list.find（'.btnClose'）。单击（F.close）
}
}
//上
如果（对象索引>0 | |对象循环）{
按钮。上一个removeClass（'btnDisabled'）；
}否则{
按钮.prev.addClass（'btnDisabled'）；
}
//下一个/播放
if（obj.loop | | obj.index

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

看起来是这样的：

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

为此：

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

---

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

如果您只想移动

切换按钮，，您实际上需要克隆它，而不是移动它

根据这个答案，我们可以将其调整为：

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

请参见
这是一个挑战，因为fancybox缩略图与图像不在同一容器中。这意味着，当图像宽度改变时，拇指不知道图像的宽度，因此它们无法正确对齐。对不起，我写评论时正在查看缩略图，但切换按钮上的相同应用程序我确实有一个想法。。。这一行（
this.list=$（opts.tpl）.addClass（opts.position）.appendTo（'body'）；
）位于fancybox帮助程序配置中，用于
afterShow
事件。。。查看是否可以
.appendTo（'.fancybox wrap'）
而不是
正文
。如果你把按钮放在同一个容器里，那么你就可以把它对齐了。没有问题，这是有效的！起初它没有，但后来我意识到它有一个固定的位置，这就是它不移动的原因。把它拿走，宾果！谢谢：）没问题！我将把它作为一个答案发布，因为它起了作用，所以它可能会在将来帮助其他人。好吧，所以我已经取得了一些进展。我从删除列表项开始，只是将其设置为div，因为在删除其他按钮之后，不需要无序列表。我在javascript中对其进行了更改，虽然效果很好，但仅在第一张幻灯片中进行了更改。下面的任何幻灯片（包括第一张幻灯片）都没有按钮。基本上，它在初始载荷下工作，但在初始载荷后不工作。有什么想法吗？我