Javascript Vimeo Gallery Basics

问题

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

http://www.playarmada.com/motion

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.

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?

回答1:

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.

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'.

Thumbnail:

<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>

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>

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(); 
    });
});

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.

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.

来源：https://stackoverflow.com/questions/7251882/javascript-vimeo-gallery-basics