youtube 自定义标题的 Fancybox 未正确显示

Question

我正在处理包含照片和视频部分的图库部分。

我的照片库一切都很好，而且工作正常。示例：相册网址http://tinyurl.com/bsqd5lp

在照片库中，我使用'titleFromAlt': true, 使用alt 标签传递标题。 alt 标签有自定义标题示例<span>2012-07-02</span><br><span>Department of Tourism</span>

我想为视频厨房做同样的事情，但我无法使用'titleFromAlt': true, 实现这一点。我这样做的方式不好，因为当将鼠标悬停在图像上时，它会显示标题作为 HTML 代码。示例：视频库 URL http://tinyurl.com/bsdq694

我遇到的其他问题是视频的标题居中。我尝试更改 CSS 以使标题左对齐。

.fancybox-title-float {
    position: absolute;
    left: 0;
    bottom: -20px;
    height: 32px;
    float:left;
}

由于某种原因，即使我在显示图像后放置上面的代码，我也无法在一夜之间完成。

帮助这点不胜感激。

更新：

你管视频的代码

$(document).ready(function () {
    $(".youtube").click(function () {
        $.fancybox({
            'padding': 0,
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'title': this.title,
            'titleFromAlt': true,
            //'titlePosition': 'over',
            'width': 680,
            'height': 495,
            'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type': 'swf',
            'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' }
        });
        return false;
    });
});

Answer 1

我们忽略的一件事是，对于您的视频，您通过.click() 使用手动方法，而不是通过.fancybox() 将fancybox 绑定到选择器的常规方法

在这种情况下 - 使用 .click() - titleFromAlt 选项将不起作用，但是您仍然可以使用常规 jQuery 表达式从存储在您的 img 标记中的 alt 属性设置 fancybox 标题。

所以试试这个脚本

$(document).ready(function () {
    $(".youtube").click(function () {
     // first, get the value from the alt attribute
        var newTitle = $(this).find("img").attr("alt"); // NEW
        $.fancybox({
            'padding': 0,
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
          //'title': this.title, // we will replace this line
            'title' : newTitle,  //<--- this will do the trick
          //'titleFromAlt': true,  // we don't need this anymore
          //'titlePosition': 'over', 
            'width': 680,
            'height': 495,
            'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type': 'swf',
            'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' }
        });
        return false;
    });
});

...假设您在img 标记中有alt 属性。

很抱歉造成混乱和所有的cmets来回。

Answer 2

通过查看您的代码，我可以看到出现在 span 标记中的文本也出现在 title 属性中。试着用文字去掉那个属性，标题文字就不会出现了。

关于第二个问题：
从 CSS 类 .fancybox-title-float 中删除属性“position: absolute;”，并从 id #fancybox-title-float-left 中删除“padding”属性。应用这些更改后，您的文本将向左对齐。