Fancybox 2。

我想将所有“按钮助手”按钮添加到标题中。
使标题与左边缘对齐,而按钮与右边缘对齐。

拜托,谁能告诉我,我该怎么办?

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", " "); //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之后添加了按钮辅助器,因此我们需要等待它才能克隆它。这是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');
}


查看新的分叉的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

09-10 07:10
查看更多