如何从按钮佣工按钮添加到标题（2的fancybox）？ [英] How to add the buttons from Button helper to the title (Fancybox 2)?

问题描述

2的fancybox

我想所有按钮帮手按钮添加到标题。
使标题被靠左对齐边缘和按钮的右边缘。

请，谁能告诉我，我该怎么办呢？

jquery.fancybox.css：

  / *！的fancybox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license * /
.fancybox换行，
.fancybox肌肤，
.fancybox-外，
.fancybox-内，
.fancybox形象，
.fancybox-TMP
{
    填充：0;
    保证金：0;
    边框：0;
    概述：无;
    垂直对齐：首位;
}.fancybox缠绕{
    位置：绝对的;
    顶部：0;
    左：0;
    的z-index：8020;
}.fancybox皮肤{
        底部：15px的;
    位置：相对;
    背景：深绿色;
    颜色：＃444;
    文字阴影：无;
}.fancybox开{
    的z-index：8030;
}.fancybox-外，.fancybox，内{
    位置：相对;
}.fancybox-内{
    溢出：隐藏;
}.fancybox形象，.fancybox的iframe {
    显示：块;
    宽度：100％;
    高度：100％;
}.fancybox图像{
    最大宽度：100％;
    最大高度：100％;
}.fancybox-TMP {
    位置：绝对的;
    顶部：-99999px;
    左：-99999px;
    visibility：hidden的;
    最大宽度：99999px;
    最大高度：99999px;
    ！溢出：可见重要的;
}.fancybox的覆盖{
    位置：固定;
    顶部：0;
    左：0;
    底部：0;
    右：0;
    的z-index：8010;
}.fancybox标题{
    visibility：hidden的;
    字体：13px的/ 20px的Helvetica Neue字体，黑体，宋体，无衬线;
    位置：相对;
    文字阴影：无;
    的z-index：8050;
}.fancybox开.fancybox标题{
    能见度：可见;
}.fancybox-标题内换行{
        位置：相对;
    填充底：5像素;
    字体重量：大胆的;
    颜色：白色;
    文本对齐：左;
}
 

jquery.fancybox-buttons.css：

 ＃的fancybox-按钮{
        显示：无;
    位置：固定;
    右：10px的;
    宽度：100％;
    的z-index：8050;
}＃的fancybox-按钮UL {
    显示：块;
    宽度：133px;
    高度：25像素;
    保证金：0汽车;
    填充右：5像素;
    列表样式：无;
}＃的fancybox-按钮UL李{
    浮动：左;
    保证金：0;
    填充：0;
}＃的fancybox-按钮的{
    显示：块;
    宽度：27px;
    高度：25像素;
    TEXT-INDENT：-9999px;
    背景颜色：深绿色;
    背景图： url('http://2.bp.blogspot.com/-5CNF6M2iOPM/UfVFckJ9jiI/AAAAAAAABjY/WT53trk2XUE/s1600/fancybox_buttons.png');
    背景重复：不重复;
    概述：无;
}＃的fancybox-按钮：悬停{
    背景图： url('http://4.bp.blogspot.com/-M6nS5WXq-lI/UfVFcvlh7MI/AAAAAAAABjU/fMbwIP_esaQ/s1600/fancybox_buttons2.png');
    背景色：森林绿;
}＃的fancybox-按钮a.btn $ P $ {PV
    背景位置：-1px -3px;
}＃的fancybox-按钮a.btnNext {
    背景位置：-31px -3px;
}＃的fancybox-按钮a.btnPlay {
    背景位置：-1px -33px;
}＃的fancybox-按钮a.btnPlayOn {
    背景位置：-31px -33px;
}＃的fancybox-按钮a.btnToggle {
    背景位置：-1px -63px;
}＃的fancybox-按钮a.btnToggleOn {
    背景位置：-31px -63px;
}＃的fancybox-按钮a.btnClose {
    高度：25像素;
    宽度：25像素;
        背景位置：-63px -3px;
        背景色：DarkRed;
    背景图： url('http://4.bp.blogspot.com/-M6nS5WXq-lI/UfVFcvlh7MI/AAAAAAAABjU/fMbwIP_esaQ/s1600/fancybox_buttons2.png');
}＃的fancybox-按钮a.btnClose：悬停{
    背景颜色：红色;
}＃的fancybox-按钮a.btnDisabled {
        背景颜色：深绿色;
    背景图： url('http://2.bp.blogspot.com/-5CNF6M2iOPM/UfVFckJ9jiI/AAAAAAAABjY/WT53trk2XUE/s1600/fancybox_buttons.png');
       光标：默认;
}
 

解决方案

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

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

  $（文件）。就绪（函数（）{
    $（。的fancybox）。每个（函数（）{
        //确保每个元素的瓷砖属性
        如果（！$（本）.attr（称号））{
            $（本）.attr（称号，＆放大器;＃160;）; //无间断空间
        }
    }）
}）; //准备
 

这将添加一个空（无间断空格）标题来的没有任何的任何链接。

在另一方面，移动按钮帮手到标题可能有一些问题，所以最好的选择是克隆它，然后克隆附加到标题。

让我们设置一些CSS属性来克隆所以它会被放置在那里，我们希望它在标题里面：

  / *隐藏实际的帮助按钮* /
＃的fancybox-按钮{
    显示：无
}
/ *定位克隆：注意类克隆* /
＃的fancybox，buttons.clone {
    位置：绝对的;
    上图：5像素;
    右：0;
}
/ *也位置的子UL * /
＃的fancybox-buttons.clone UL {
    右：0;
    保证金：0;
    位置：绝对的;
}
 

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

• 克隆按钮帮手


• 类克隆添加到克隆的元素


• 追加到的fancybox 标题


• 显示它（淡入它）

注意，我们将设置标题位置在来使事情可行。还要注意，由于的fancybox加载后添加的按钮帮手，我们需要等待它之前，我们可以克隆它;这就是的setTimeout 就派上用场了：

  $（文件）。就绪（函数（）{
    $（。的fancybox）。每个（函数（）{
        //确保每个元素的瓷砖属性
        如果（！$（本）.attr（称号））{
            $（本）.attr（称号，＆放大器;＃160;）; //无间断空间
        }
    }）。的fancybox（{
        模式：真实，
        助手：{
            标题：{
                类型：内部
            }，
            纽扣： {}
        }，
        afterShow：功能（）{
            //等待按钮帮手
            VAR键= setTimeout的（函数（）{
                $（＃的fancybox-按钮）
                    .clone（真，真）//克隆与数据和事件
                    .attr（类，克隆）//设置类克隆（和删除类顶）
                    .appendTo（。的fancybox标题）//追加到标题
                    。淡入（）; //显示好听
            }，100）; //的setTimeout
        } // afterShow
    }）; //的fancybox
}）; //准备
 

请参阅它的工作： 的jsfiddle

• 在您自担风险使用;）

修改

在previous演示，任何按钮被点击时，图标不会由OP指出更改为相应的功能。我们需要一些额外的回调，以图标来回切换功能添加到克隆的按钮：

  onPlayStart：功能（）{
    $（＃的fancybox-buttons.clone）找到（btnPlay）ATTR（'标题'，'暂停幻灯片'）addClass（'btnPlayOn'）。;
}，
onPlayEnd：功能（）{
    $（＃的fancybox-buttons.clone）找到（btnPlay）ATTR（标题，开始播放幻灯片）removeClass移除（'btnPlayOn'）。;
}，
的onUpdate：功能（）{
    $（＃的fancybox-buttons.clone）找到（btnToggle）toggleClass（'btnToggleOn'）。
}
 

请参阅新分叉的jsfiddle

编辑＃2

要修复的onUpdate 按钮来回切换的问题，同时滚动（按照OP的评论），当锁定叠加设置为false - 覆盖：{锁定：假} - 我们要更换此code：

 的onUpdate：功能（）{
    $（＃的fancybox-buttons.clone）找到（btnToggle）toggleClass（'btnToggleOn'）。
}
 

本：

 的onUpdate：功能（）{
    VAR切换;
    拨动= $（＃的fancybox-buttons.clone）找到（btnToggle）。removeClass移除（'btnDisabled btnToggleOn'）。
    如果（this.canShrink）{
       toggle.addClass（'btnToggleOn'）;
    }否则如果（！this.canExpand）{
       toggle.addClass（'btnDisabled'）;
    }
}
 

请参阅新的的jsfiddle

Fancybox 2.

I would like to add all "Button helper" buttons to the title. So that the title was aligned to the left edge and the buttons to the right edge.

Please, can anyone tell me, how can I do it?

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

解决方案

This is one of the weirdest things I have done with fancybox, but just for fun.

First, if you want to add the buttons helper to the title, then you have to make sure that every link has the title attribute (some may not)... so you can start with this :

$(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

This will add an empty (no-break space) title to any link that doesn't have any.

On the other hand, moving the Buttons helper to the title may have some issues so the best option is to clone it and then append the clone to the title.

Let's set some CSS properties to the clone so it will be positioned where we want it inside the 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;
}

Then, we will use the afterShow callback in our fancybox custom script to :

• clone the buttons helper
• add the class clone to the cloned element
• append it to the fancybox title
• show it (fade it in)

NOTICE that we will set the title position inside to make the things workable. Also notice that since the buttons helper is added after the fancybox is loaded, we will need to wait for it before we can clone it; this is where setTimeout comes in handy :

$(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

See it working : JSFIDDLE

• Use at your own risk ;)

EDIT :

In the previous demo, when any of the buttons is clicked, the icon doesn't change to the corresponding functionality as pointed out by the OP. We would need some extra callbacks to add the icon "toggling" functionality to our cloned buttons :

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

See new forked JSFIDDLE

EDIT #2 :

To fix the onUpdate button toggling issue while scrolling (as per the OP's comment) when the overlay locked is set to false - overlay : {locked:false} - we have to replace this code :

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

by this :

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

See new JSFIDDLE

这篇关于如何从按钮佣工按钮添加到标题（2的fancybox）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！