javascript - fancybox 中的两个标题？

Question

我正在尝试为fancybox iframe 设置两个标题框。我使用的是1.3.4 版，这是我目前得到的。

这是相关的源代码：

$(document).ready(function() {
        $("a.group").fancybox({
            'zoomSpeedIn'           : 600,
            'zoomSpeedOut'          : 500,
            'easingIn'              : 'easeOutBack',
            'easingOut'             : 'easeInBack'

        });

$("a.iframe").fancybox({
        'titlePosition' : 'over',
            'showCloseButton'   : false,
            'titleShow'         : true,
            'scrolling'         :'no',
            'width'        : 650,
            'height'       : 660,
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe',
            'hideOnOverlayClick': false,
            'hideOnContentClick': false,
            'enableEscapeButton': false
        });
    });

但我想在我的灯箱底部有相同的标题框，而不删除它顶部的标题框。所以我在 fancybox css 中创建了另一个属性：

.fancybox-title-over1 {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #FFF;
    text-align: left;
}


#fancybox-title-over1 {
    padding: 10px;
    background-image: url('mybottomtitlebackground.png');
    display: block;
}

但我不知道如何在我的灯箱上显示它。

预先感谢您的协助！

Answer 1

如果我正确理解您的问题，您可以克隆标题，然后将其放在底部：

var title = $(".fancybox-title-over");
title.css({'top':'0px', 'bottom':'auto'});
var p = $(".fancybox-title-over").parent();
var x = $(".fancybox-title-over").clone();
p.append(x);
x.css({"top":"auto","bottom":"0", "position":"absolute"});

更新小提琴：http: //jsfiddle.net/a65ZN/11/