Основы галереи Vimeo Основы

Question

Я кодирую раздел галереи для своего личного сайта в JS, используя jQuery.

http://www.playarmada.com/motion

Для указанной выше странице, я планирую использовать JQuery, чтобы лишить гиперссылки из эскизов, которые затем использовать JavaScript для перезаписи встроенного видео URL для нового видео.

Я очень новичок в JS, но не в кодировке. Я хочу, чтобы он загружал новые видео при нажатии на большие пальцы без загрузки новой страницы -unless-js отключен, и в этом случае я хочу, чтобы он ухудшался до гиперссылок.

Есть ли какой-нибудь лучший способ сделать это, я должен знать или у меня это получилось?

Answer 1

Чтобы это стало проще, вы должны указать некоторые из соответствующих 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(); 
    }); 
}); 

Мы в основном добавить слушателя событий для «нажмите кнопку» событие для всех миниатюр на странице. В этом прослушивающем событии мы получаем видео uri, хранящиеся в миниатюре с кликом, и сообщаем iframe загружать uri. Мы вызываем e.preventDefault(), чтобы браузер не переходил к исходной ссылке.

Если JavaScript отключен, миниатюры останутся постоянными. Нажатие на них приводит к текущему поведению, когда пользователь переходит на новую страницу с видео.