0

jQueryを使用して、JSの個人サイトのギャラリーセクションをコーディングしています。

http://www.playarmada.com/motion

上記のページでは、JQueryを使用してサムネイルからハイパーリンクを削除し、JavaScriptを使用して埋め込みビデオのURLを新しいビデオに書き換えることを計画しています。

私はJSに非常に慣れていませんが、コーディングはしていません。親指がクリックされたときに、新しいページをロードせずに、新しいビデオをロードしたいのですが、jsが無効になっている場合を除きます。その場合、ハイパーリンクに劣化させます。

私が知っておくべきこれを行うためのより良い方法はありますか、それとも私はそれをほとんど手に入れましたか？

4

1 に答える 1

0

これを簡単にするには、ページ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>

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が無効になっている場合、サムネイルは通常のリンクのままになります。それらをクリックすると、ユーザーがビデオのある新しいページに移動する現在の動作になります。

于 2011-08-31T04:32:02.977 に答える