带有 Jquery 的 Vimeo 画廊 - 几乎就在那里

Question

我有一个使用 Vimeo 的视频库，顶部有一个主播放器、标题、日期、说明，底部有其他视频的缩略图列表。我让它在你点击缩略图的地方工作，它会更新主播放器中的 url。唯一剩下的就是更新标题、日期和描述。这是我目前所拥有的。

热门视频、标题、日期和描述html：

<iframe src="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933" id="video-iframe" width="700" height="394" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<h2 id="wkTitle">{video_title}</h2>
<p id="wkDate" class="date">Date: {series_weeks:seriesWkDate format="%m/%d/%Y"}</p>
<p id="wkDescription">{video_description}</p>

缩略图部分：

<a href="#" title="{video_title} - {series_weeks:seriesWkDate format="%m/%d/%Y"}" class="videoThumbnail video-thumbnail" rel="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933">
<img src="{video_thumbnail}" alt="{video_title} - {series_weeks:seriesWkDate format="%m/%d/%Y"}" class="img-responsive" />
<span class="playButton"></span>
</a>

jQuery：

$(function() {
$('.video-thumbnail').click(function(e) {
    $('#video-iframe').get(0).src = this.getAttribute('rel');;
});

});

有人可以帮帮我吗？这是参考页面：http://discoverycolorado.dreamhosters.com/series/get-off-your-donkey

当您点击缩略图时，您会看到视频会发生变化，但我还需要它来更改标题和说明。

谢谢

Answer 1

您的 HTML 当前如下所示：

<a href="#" title="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="videoThumbnail video-thumbnail" rel="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933">
    <img src="{video_thumbnail}" alt="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="img-responsive" /><span class="playButton"></span>
</a>

但是，您似乎已经在 a 元素中为每个视频硬编码某些参数，因此您可以添加 data 属性来保存视频的标题、日期和描述：

<a data-title="{video_title}" data-date="{series_weeks:seriesWkDate format=" %m/%d/%Y "}" data-description="{video_description}" href="#" title="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="videoThumbnail video-thumbnail" rel="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933">
    <img src="{video_thumbnail}" alt="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="img-responsive" /><span class="playButton"></span>
</a>

基本上，您使用data-title、data-date 和data-description 将它们各自的数据内联到元素中（我不会这样做，但由于您已经有很多内联数据，为什么不）。

如果您要采用data 路径，则可以在单击缩略图后执行以下操作来填充字段：

$(".video-thumbnail").click(function(){
    $("#video-iframe").attr("src", $(this).attr("rel"));
    $("#wkTitle").text($(this).data("title"));
    $("#wkDate").text("Date - " + $(this).data("date"));
    $("#wkDescription").text($(this).data("description")); 
});

所以最终，这种方法归结为填充缩略图元素的 data 字段，然后将相应 HTML 元素的文本设置为内联数据。

我建议您清理您的 HTML，尤其是因为到目前为止，您的 title 属性由于 " 中的 " 而存在语法错误。您也可以不使用data 属性并依赖缩略图元素的title 属性，但是您必须解析字符串，在- 处拆分它，这会使您的实现遇到各种问题.

此外，这种方法可能不起作用，具体取决于您如何以编程方式将 {} 信息插入到各种属性中。