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

问题描述：

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

答

这是我所用的fancybox做过最不可思议的事情之一，但只是为了好玩。

首先，如果你想要的按钮助手添加到title，那么你必须确保每一个环节都有title属性（有些人可能不）......这样你就可以用这个启动：

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

这将添加一个空的（无休息空间）title任何没有任何链接。

另一方面，将按钮帮助器移动到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; 
}

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

克隆按钮帮手
类clone添加到克隆的元素
追加到的fancybox title
显示它（淡入它）

注意，我们将设置title位置inside做的事情是可行的。另外请注意，由于按钮助手是在fancybox加载后添加的，我们需要等待它，然后才能克隆它;这就是setTimeout就派上用场了：

$(document).ready(function() { 
    $(".fancybox").each(function() { 
     // make sure every element has the tile attribute 
     if (!$(this).attr("title")) { 
      $(this).attr("title", "&#160;"); //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'); 
}

见新的分叉JSFIDDLE

编辑＃2：

要解决的onUpdate按钮切换问题，同时滚动（根据OP的评论）当覆盖锁定设置为false - 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

感谢的想法。我改变了你的脚本。我的版本：[http://jsfiddle.net/5QbeL/show/](http://jsfiddle.net/5QbeL/show/）但是在您的和我的脚本中，“播放/暂停”按钮和“尺寸切换“按钮背景（图标）在我点击其中任何一个后不会改变。 1）尝试暂停幻灯片按暂停按钮，该按钮仍然会显示暂停按钮。 2）尝试按下相应的按钮来展开或缩小图像，并且该按钮不会改变其背景（图标）。 –

@WalterStolz：看到我编辑的答案。如果你考虑的话也请http://meta.stackexchange.com/a/5235 – JFK

我想指定关于“onUpdate”回调方法函数的工作。如果未显示覆盖锁定参数（默认值），则切换大小按钮不会更改滚动时的背景（图标）。这很好。如果该参数设置为假值，则切换大小按钮会在滚动时更改图标。例如：[http://jsfiddle.net/ajk89/show/](http://jsfiddle.net/ajk89/show/）如何禁用此功能？ –

答

有点晚，但我知道我会附和我的两分钱的价值在这里。

假设需要点击按钮帮助器来实现声明函数的自定义按钮是不正确的，并且会导致比值得的更多的问题...您甚至不需要激活按钮帮助器。

解决方案是利用已映射到键的功能，并根据需要将所述功能附加到您自己的按钮上。我下水的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下应用会导致按钮加载和实际上成为活动元素之间的不必要的延迟。

编辑我已经发现在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'); 
     } 
    }

我做了我自己的版本，不同于JFK提供的版本。我手动添加按钮到标题。但我有兴趣看到你的版本。可以显示JSFIDDLE工作示例吗？ –

答

我自己的版本，没有延迟闪烁。
例子：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}

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

相关推荐