1

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

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

在照片库中，我使用标签'titleFromAlt': true,传递标题。altalt 标签有自定义标题示例<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;
    });
});
4

2 回答 2

1

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

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

于 2012-07-09T14:07:35.243 回答
1

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

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

所以试试这个脚本

$(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

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

于 2012-07-10T06:58:17.797 回答