如何将Button助手中的按钮添加到标题（Fancybox 2）？

时间：2013-07-26 13:27:50

标签： jquery button fancybox fancybox-2

Fancybox 2。

我想在标题中添加所有“Button helper”按钮。 因此标题与左边缘对齐，按钮与右边缘对齐。

拜托，任何人都可以告诉我，我该怎么做？

jquery.fancybox.css： 

    /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
        bottom: 15px;
    position: relative;
    background: DarkGreen;
    color: #444;
    text-shadow: none;
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-outer, .fancybox-inner {
    position: relative;
}

.fancybox-inner {
    overflow: hidden;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

.fancybox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 8010;
}

.fancybox-title {
    visibility: hidden;
    font: 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-inside-wrap {
        position: relative;
    padding-bottom: 5px;
    font-weight: bold;
    color: white;
    text-align: left;
}

jquery.fancybox-buttons.css： 

#fancybox-buttons {
        display: none;
    position: fixed;
    right: 10px;
    width: 100%;
    z-index: 8050;
}

#fancybox-buttons ul {
    display: block;
    width: 133px;
    height: 25px;
    margin: 0 auto;
    padding-right: 5px;
    list-style: none;
}

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

#fancybox-buttons a {
    display: block;
    width: 27px;
    height: 25px;
    text-indent: -9999px;
    background-color: DarkGreen;  
    background-image: url('http://2.bp.blogspot.com/-5CNF6M2iOPM/UfVFckJ9jiI/AAAAAAAABjY/WT53trk2XUE/s1600/fancybox_buttons.png');
    background-repeat: no-repeat;
    outline: none;
}

#fancybox-buttons a:hover {
    background-image: url('http://4.bp.blogspot.com/-M6nS5WXq-lI/UfVFcvlh7MI/AAAAAAAABjU/fMbwIP_esaQ/s1600/fancybox_buttons2.png');
    background-color: ForestGreen;  
}

#fancybox-buttons a.btnPrev {
    background-position: -1px -3px;
}

#fancybox-buttons a.btnNext {
    background-position: -31px -3px;
}

#fancybox-buttons a.btnPlay {
    background-position: -1px -33px;
}

#fancybox-buttons a.btnPlayOn {
    background-position: -31px -33px;
}

#fancybox-buttons a.btnToggle {
    background-position: -1px -63px;
}

#fancybox-buttons a.btnToggleOn {
    background-position: -31px -63px;
}

#fancybox-buttons a.btnClose {
    height: 25px;
    width: 25px;
        background-position: -63px -3px;
        background-color: DarkRed;
    background-image: url('http://4.bp.blogspot.com/-M6nS5WXq-lI/UfVFcvlh7MI/AAAAAAAABjU/fMbwIP_esaQ/s1600/fancybox_buttons2.png');
}

#fancybox-buttons a.btnClose:hover  {
    background-color: Red;
}

#fancybox-buttons a.btnDisabled {
        background-color: DarkGreen;
    background-image: url('http://2.bp.blogspot.com/-5CNF6M2iOPM/UfVFckJ9jiI/AAAAAAAABjY/WT53trk2XUE/s1600/fancybox_buttons.png');
       cursor: default;
}

3 个答案:

答案 0 :(得分：4)

这是我用fancybox做过的最奇怪的事情之一，但只是为了好玩。

首先，如果你想将按钮助手添加到title，那么你必须确保每个链接都有title属性（有些可能没有）...所以你可以开始有了这个：

$(document).ready(function () {
    $(".fancybox").each(function () {
        // make sure every element has the tile attribute
        if (!$(this).attr("title")) {
            $(this).attr("title", " "); //no-break space
        }
    })
}); // ready

这将为任何没有任何链接的链接添加一个空（不间断空格）title。

另一方面，将Buttons助手移动到title可能会有一些问题，因此最好的选择是克隆它，然后将克隆附加到title。

让我们为克隆设置一些CSS属性，这样它就会定位在title里面我们想要的位置： 

/* hide the actual buttons helper */
#fancybox-buttons {
    display: none
}
/* position the clone : notice the class "clone" */
#fancybox-buttons.clone {
    position: absolute;
    top: 5px;
    right: 0;
}
/* also position the child ul */
#fancybox-buttons.clone ul {
    right: 0;
    margin: 0;
    position: absolute;
}

然后，我们将在fancybox自定义脚本中使用afterShow回调：

  • 克隆按钮帮助
  • 将类clone添加到克隆元素
  • 将其附加到fancybox title
  • 显示它（淡入）

注意我们会设置title位置inside以使事情可行。另请注意，由于在加载fancybox之后添加了按钮helper，我们需要等待它才能克隆它;这是setTimeout派上用场的地方：

$(document).ready(function () {
    $(".fancybox").each(function () {
        // make sure every element has the tile attribute
        if (!$(this).attr("title")) {
            $(this).attr("title", " "); //no-break space
        }
    }).fancybox({
        modal: true,
        helpers: {
            title: {
                type: 'inside'
            },
            buttons: {}
        },
        afterShow: function () {
            // wait for the buttons helper
            var buttons = setTimeout(function () {
                $("#fancybox-buttons")
                    .clone(true, true) // clone with data and events
                    .attr("class", "clone") // set class "clone" (and remove class "top")
                    .appendTo(".fancybox-title") // append it to the title
                    .fadeIn(); // show it nicely
            }, 100); //setTimeout
        } // afterShow
    }); // fancybox
}); // ready

看到它正常工作： JSFIDDLE

  • 使用风险;）

编辑：

在上一个演示中，当单击任何按钮时，图标不会更改为OP指出的相应功能。我们需要一些额外的回调来为我们的克隆按钮添加图标“切换”功能：

onPlayStart: function () {
    $("#fancybox-buttons.clone").find(".btnPlay").attr('title', 'Pause slideshow').addClass('btnPlayOn');
},
onPlayEnd: function () {
    $("#fancybox-buttons.clone").find(".btnPlay").attr('title', 'Start slideshow').removeClass('btnPlayOn');
},
onUpdate: function () {
    $("#fancybox-buttons.clone").find(".btnToggle").toggleClass('btnToggleOn');
}

参见 new forked JSFIDDLE

编辑＃2 ：

要在叠加锁定设置为false时修复onUpdate按钮切换问题（根据OP的评论） - overlay : {locked:false} - 我们必须替换此代码：

onUpdate: function () {
    $("#fancybox-buttons.clone").find(".btnToggle").toggleClass('btnToggleOn');
}

由此：

onUpdate: function () {
    var toggle;
    toggle = $("#fancybox-buttons.clone").find(".btnToggle").removeClass('btnDisabled btnToggleOn');
    if (this.canShrink) {
       toggle.addClass('btnToggleOn');
    } else if (!this.canExpand) {
       toggle.addClass('btnDisabled');
    }
}

参见新JSFIDDLE

答案 1 :(得分：0)

我知道的有点晚了，但我要在这里为自己的两分钱钟声。

假设需要使用按钮帮助程序来实现声明函数的自定义按钮是不正确的，并且导致更多问题而不是值得...你甚至不需要激活按钮帮助程序。

解决方案是使用已映射到键的函数，并根据需要将所述函数附加到您自己的按钮。我启动Fancybox 2.1.5的代码如下所示：

$(function() {  
    $('.fancybox').fancybox({
             scrolling      : 'yes',
             openEffect  : 'elastic',
             closeEffect : 'fade',
             openSpeed   : 600,
             closeSpeed   : 200,
             prevEffect : 'fade',
             nextEffect : 'fade',
             closeBtn  : true,
             arrows    : false,
             nextClick : false,
             helpers : {
              title : {
               type : 'inside'
              },
            //buttons : {},
              thumbs : {
               width : 75,
               height : 75
              }
             },
        afterShow: function() {
            expander = $('<a class="expander" title="Toggle size" href="javascript:;"></a>').appendTo('.fancybox-inner');
            toggle = $('.expander').on('click.fb', $.fancybox.toggle ).removeClass('hidden btnToggleOn');
            if (this.canShrink) {
                toggle.addClass('btnToggleOn');
            } else if (!this.canExpand) {
                toggle.addClass('hidden');
            }
            $('.fancybox-skin').swipe({
                  threshold : 40,

                  swipeLeft: function(event, direction) {
                        $.fancybox.next( direction );
                  },
                  swipeRight: function(event, direction) {
                        $.fancybox.prev( direction );
                  }
            });
        }

    });
}(jQuery));

请注意，我在'afterShow'下包含了切换变量状态而不是'onUpdate'..这是一个故意的方法，因为我发现在afterLoad下应用会导致按钮加载之间出现不必要的延迟并且实际上变为现场元件。

EDIT 我已经发现在afterShow中创建了关于在更新时添加类的问题的'toggle'的变量状态。更改以下内容：

        afterShow: function() {
        /*twttr.widgets.load();*/
        expander = $('<a class="expander" title="Toggle size" href="javascript:;"></a>').appendTo('.fancybox-inner').on('click.fb', $.fancybox.toggle );
        $('.fancybox-skin')
            $('.fancybox-skin').swipe({
                threshold : 100,
                swipe:function(event, direction) {}
            });
            $('.fancybox-skin')
                .on('swipeLeft', function(){
                  $.fancybox.next();
                })
                .on('swipeRight', function(){
                  $.fancybox.prev();
            });
        },
    onUpdate: function() {
        var toggle;
        toggle = $('.expander').removeClass('hidden ToggleOn');
        if (this.canShrink) {
            toggle.addClass('ToggleOn');
        } else if (!this.canExpand) {
            toggle.addClass('hidden');
        }
    }

答案 2 :(得分：0)

我自己的版本，没有延迟和眨眼 示例：JSFIDDLE

JavaScript的：

$(document).ready(function () {
  $(".fancybox").fancybox({
    openEffect: "elastic",
    openSpeed: 100,
    closeEffect: "elastic",
    closeSpeed: 100,
    prevEffect: "none",
    prevSpeed: 100,
    nextEffect: "none",
    nextSpeed: 100,
    minWidth: "130px",
    padding: 5,
    closeBtn: false,
    helpers: {
        title: {
            type: "inside",
            position: "top"
        },
        overlay: {
            locked: false
        }
    },
    afterLoad: function () {
        if (this.group.length > 1) {
            this.title = '<div id="fancybox-buttons"><ul><li><a class="btnPrev" onClick="javascript:$.fancybox.prev();"></a></li><li><a class="btnPlay" onClick="javascript:$.fancybox.play();"></a></li><li><a class="btnNext" onClick="javascript:$.fancybox.next();"></a></li><li><a class="btnToggle" onClick="javascript:$.fancybox.toggle();"></a></li><li><a class="btnClose" onClick="javascript:$.fancybox.close();"></a></li></ul></div> Рисунок ' + (this.index + 1) + " из " + this.group.length + (this.title ? " - " + this.title : "")
        }
        if (this.group.length < 2) {
            $.extend(this, {
                loop: false
            });
            this.title = '<div id="fancybox-buttons"><ul><li><a class="btnPrev btnDisabled"></a></li><li><a class="btnPlay btnDisabled"></a></li><li><a class="btnNext btnDisabled"></a></li><li><a class="btnToggle" onClick="javascript:$.fancybox.toggle();"></a></li><li><a class="btnClose" onClick="javascript:$.fancybox.close();"></a></li></ul></div> Рисунок ' + (this.index + 1) + " из " + this.group.length + (this.title ? " - " + this.title : "")
        }
    },
    afterShow: function () {
        $(".fancybox-wrap").easydrag();
        var e;
        e = $("#fancybox-buttons").find(".btnPlay").removeClass("btnPlayOn");
        if ($.fancybox.player.isActive) {
            e.addClass("btnPlayOn")
        }
        var t;
        t = $("#fancybox-buttons").find(".btnToggle").removeClass("btnDisabled btnToggleOn");
        if (this.canShrink) {
            t.addClass("btnToggleOn")
        } else if (!this.canExpand) {
            t.addClass("btnDisabled")
        }
    },
    onPlayStart: function () {
        $("#fancybox-buttons").find(".btnPlay").addClass("btnPlayOn")
    },
    onPlayEnd: function () {
        $("#fancybox-buttons").find(".btnPlay").removeClass("btnPlayOn")
    },
    onUpdate: function () {
        var e;
        e = $("#fancybox-buttons").find(".btnToggle").removeClass("btnDisabled btnToggleOn");
        if (this.canShrink) {
            e.addClass("btnToggleOn")
        } else if (!this.canExpand) {
            e.addClass("btnDisabled")
        }
    }
  })
});

CSS：

#fancybox-buttons{position:absolute;width:100%;z-index:8050}
#fancybox-buttons ul{display:block;float:right;height:25px;list-style:none;margin:0 auto;width:155px; margin-top: -10px;}
#fancybox-buttons ul li{float:left;margin:0;padding:0}
#fancybox-buttons a{cursor:pointer;background-repeat:no-repeat;display:block;height:25px;outline:none;text-indent:-9999px;width:27px}
相关问题
最新问题