Javascript Vimeo Gallery Basics

Question

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

http://www.playarmada.com/motion

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

我是JS的新手，但不是编码。我希望它在点击拇指时加载新视频，而不加载新页面 - 无 - js被禁用，在这种情况下我希望它降级为超链接。

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

Answer 1

为了使这更容易，您应该在页面ID /类上提供一些相关的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>

I帧：

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

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

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