Question

我有一个显示vimeo和youtube视频的fancybox媒体框。我需要在电影下方有一个标题，其中包含有关视频的内容。这可能吗？这是我的js：

Fancybox功能：

$("#clpbox").click(function () {
    $.fancybox({
        helpers: {
            title: {
                type: 'inside'
            }
        },
        afterLoad: function () {
            this.title = this.title + ' ' + $(this.element).find('img').attr('alt');
        },
        'padding': 0,
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'title': this.title,
        'width': 665,
        'height': 400,
        'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type': 'iframe',
        'swf': {
            'wmode': 'transparent',
            'allowfullscreen': 'true'
        }
    });

    return false;
});

我的html / xslt看起来像是：

<li>
     <a id="clpbox" alt="{Thumbnail/@AlternateText}" href="http://www.youtube.com/watch?v={YouTubeID}?autoplay=1" target="_blank">
     <xsl:apply-templates select="Thumbnail" mode="imageLink" /></a>
</li>

只是添加一个div或fancybox内置了什么内容，我可以参考在视频下方创建一个抽象或内容区域？

Answer 1

你的JQuery似乎很好。问题出在你的HTML上。 HTML在title代码中不包含<a>属性。

<li>
    <a id="clpbox" title="{Thumbnail/@AlternateText}" alt="{Thumbnail/@AlternateText}" href="http://www.youtube.com/watch?v={YouTubeID}?autoplay=1" target="_blank">
        <xsl:apply-templates select="Thumbnail" mode="imageLink"/>
    </a>
</li>

参考示例 LIVE DEMO

示例代码：

$(".fancybox").fancybox({
    iframe: {
        preload: false
    },
    margin: [20, 60, 20, 60],
    helpers: {
        title: {
            type: 'inside'
        },
        overlay: {
            showEarly: false
        }
    }
});

参考另一个示例 LIVE DEMO

如何为Fancybox-Media框添加标题

1 个答案:

示例代码：