Question

我正在制作一个有照片＆amp;视频部分。

我的照片库和照片库都很好。它工作正常。示例：照片库网址http://tinyurl.com/bsqd5lp

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

我想为视频厨房做同样的事情，但我无法使用'titleFromAlt': true,实现此目的。我这样做的方式并不好，因为它将鼠标悬停在图像上作为HTML代码时显示标题。示例：视频库网址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

通过查看代码，我可以看到出现在span标记中的文本也出现在title属性中。尝试使用文本删除该属性，标题文本将不会出现。

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

Answer 2

我们忽略的一件事是，对于您的视频，您通过.click()使用手动方式，而不是通过.fancybox()

将fancybox绑定到选择器的常规方式

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

所以试试这个脚本

$(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;
    });
});

...假设您在alt代码中有img个属性。

对于混淆和来回的所有评论感到抱歉。

用于youtube自定义标题的Fancybox无法正常显示

2 个答案: