Javascript Vimeo 图库基础知识答案

【问题标题】：Javascript Vimeo Gallery BasicsJavascript Vimeo 图库基础知识
【发布时间】：2011-08-31 02:16:59
【问题描述】：

我正在使用 jQuery 为我的个人网站在 JS 中编写一个画廊部分。

http://www.playarmada.com/motion

对于上述页面，我计划使用 JQuery 从缩略图中去除超链接，然后使用 javascript 将嵌入的视频 URL 重写为新视频。

我对 JS 很陌生，但不会编码。我希望它在单击拇指时加载新视频，而不加载新页面 - 除非 - js 被禁用，在这种情况下我希望它降级为超链接。

有没有更好的方法来做到这一点我应该知道或者我已经知道了？

【问题讨论】：

标签： javascript html gallery vimeo

【解决方案1】：

为了使这更容易，您应该在您的页面 ids/classes 上提供一些相关的 HTML 元素。这使它们更容易通过引用。 JavaScript。

为您的缩略图添加一个类<a> 元素；让我们给他们一个类名video-thumbnail。此外，请提供包含您的 <iframe> Vimeo 视频 ID；我们称之为“video-iframe”。

缩略图：

<a class="video-thumbnail" href="http://www.playarmada.com/motion/orrery">
    <img class="gt_orrery" src="http://www.playarmada.com/images/thumbs/orrery.jpg">
</a>

内嵌框架：

<iframe id="video-iframe" src="http://player.vimeo.com/video/..."></iframe>

为了节省空间，我们可以将缩略图指向的视频 URI 直接存储在 <a> 标记中。

<a class="video-thumbnail" href="..." video-uri="http://player.vimeo.com/video/...">
   <img></img> 
</a>

设置完成后，我们就可以开始 jQuery 魔法了：

$(function() {
    // Add an event listener to the click event for each of your thumbnails
    $('.video-thumbnail').click(function(e) {

        // changes src of the iframe to the one we stored in the clicked thumbnail
        $('#video-iframe').get(0).src = this.getAttribute('video-uri');

        // stops default browser behaviour of loading a new page
        e.preventDefault(); 
    });
});

我们基本上为页面上所有缩略图的“点击”事件添加了一个事件监听器。在此事件侦听器中，我们获取存储在单击缩略图中的视频 uri，并告诉 iframe 加载 uri。我们调用e.preventDefault() 阻止浏览器转到原始链接。

如果禁用 JavaScript，缩略图将保留为常规链接。单击它们会导致用户转到带有视频的新页面的当前行为。

【讨论】：