Javascript Vimeo Gallery Basics

Question

我正在使用jQuery爲JS中的個人網站編寫一個庫部分。

http://www.playarmada.com/motion

對於上述頁面，我打算使用jQuery從縮略圖，然後將使用JavaScript來嵌入視頻URL改寫爲新的視頻脫衣的超鏈接。

我對JS很新，但沒有編碼。我希望它在點擊大拇指時加載新視頻，而無需加載新頁面-unless-js被禁用，在這種情況下，我希望它降級爲超鏈接。

有沒有更好的方法來做到這一點我應該知道或有我幾乎得到它？

Answer 1

爲了使這更容易，你應該在你的頁面ID /類上提供一些相關的HTML元素。這使得它們更容易通過引用。 JavaScript的。

將一個類添加到您的縮略圖<a>元素;讓我們給他們一個 類名video-thumbnail。此外，請將包含您的 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：

<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被禁用，縮略圖將保持爲常規鏈接。點擊它們會導致用戶轉到帶有視頻的新頁面的當前行爲。