Javascript Vimeo Gallery基础知识 [英] Javascript Vimeo Gallery Basics

问题描述

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

I am coding a gallery section for my personal site in JS, using jQuery.

http://www.playarmada.com/motion

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

For the above page, I am planning to use JQuery to strip the hyperlinks from the thumbnails, which would then use javascript to rewrite the embedded video URL to the new video.

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

I am very new to JS, but not coding. I want it to load the new videos when the thumbs are clicked, without loading a new page -unless- js is disabled in which case i want it to degrade to hyperlinks.

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

Is there some better way to do this I should know about or have I pretty much got it?

推荐答案

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

To make this easier, you should give some of the relevant HTML elements on your page ids/classes. This makes them easier to reference via. JavaScript.

在缩略图中添加一个类< a> 元素;让我们给他们一个
类名 video-thumbnail 。另外，将包含
Vimeo视频的< iframe> 作为ID;我们称之为`video-iframe'。

Add a class to your thumbnail <a> elements; let's give them a class name video-thumbnail. Additionally, give the <iframe> containing your Vimeo video an id; let's call it `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：

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

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

To save space, we can store the video URI a thumbnail points to directly in the <a> tag.

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

一旦设置好，我们就可以开始jQuery魔术：

Once this is set up, we can begin the jQuery magic:

$(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（）来阻止浏览器转到原始链接。

We basically add an event listener for the 'click' event for all the thumbnails on the page. In this event listener, we get the video uri stored in the clicked thumbnail and tell the iframe to load the uri. We call e.preventDefault() to stop the browser from going to the original link.

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

If JavaScript is disabled, the thumbnails will stay as regular links. Clicking on them results in the current behaviour where the user goes to a new page with the video.

这篇关于Javascript Vimeo Gallery基础知识的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！