Основы галереи Javascript Vimeo - PullRequest
Новая
       11

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

0 голосов
/ 31 августа 2011

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

http://www.playarmada.com/motion

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

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

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

1 Ответ

0 голосов
/ 31 августа 2011

Чтобы сделать это проще, вы должны указать некоторые соответствующие элементы HTML в идентификаторах / классах вашей страницы. Это делает их легче ссылаться через. JavaScript.

Добавьте класс к вашему эскизу <a> elements; давайте дадим им имя класса video-thumbnail. Кроме того, дайте <iframe>, содержащий ваш Видео Vimeo ID; давайте назовем это видео-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 отключен, миниатюры останутся обычными ссылками. Нажатие на них приводит к текущему поведению, когда пользователь переходит на новую страницу с видео.

...