0

fancyboxiframeに2つのタイトルボックスを設定しようとしています。現在入手しているバージョン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
        });
    });

ただし、ライトボックスの上部にあるタイトルボックスを削除せずに、ライトボックスの下部に同じタイトルボックスを配置したいと思います。だから私はfancyboxcssに別のプロパティを作成しました：

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

しかし、ライトボックスに表示する方法がわかりません。

よろしくお願いします！

4

1 に答える 1

0

私があなたの質問を正しく理解しているなら、あなたはタイトルを複製して、それを一番下に置くことができます：

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/

于 2012-09-23T19:10:52.933 に答える