Vimeo Gallery

Here is our code from a revised .js example that pulls in videos, title and description from vimeo onto a gallery style page.
Here is preview: is.gd/fQ0sK

<code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>Vimeo Gallery Example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"> a { color: #000; text-decoration: none; } .clear { clear: both; } #fVideo { position: relative; left: 0px; width: 905px; min-height: 350px; margin-bottom: 20px; margin: 0 auto; border-bottom: 2px solid #ccc; } #fVideo span.current { position: relative; left: 10px; width: 525px; float: left; } #fVideo p { position: relative; left: 0px; top: 0px; padding: 0 0 0 5px; margin: 0px; } #fVideo p span a { cursor: default; } #thumbs { position: relative; width: 900px; margin: 0 auto; } #thumbs ul { padding: 0px; } #thumbs ul li { position: relative; width: 265px; height: 250px; overflow: hidden; float: left; list-style-type: none; margin: 10px; padding: 5px; border-left: 2px solid #ccc; } #thumbs ul li a p { width: 260px; } #thumbs ul li:hover, #thumbs ul li a:hover { background-color: #efefed; } </style> <script type="text/javascript"> var apiEndpoint = 'http://vimeo.com/api/v2/'; var oEmbedEndpoint = 'http://vimeo.com/api/oembed.json' var oEmbedCallback = 'switchVideo'; var videosCallback = 'setupGallery'; var vimeoUsername = 'vincebaskerville'; // this is the user to change // grab videos $(document).ready(function() { $.getScript(apiEndpoint + vimeoUsername + '/videos.json?callback=' + videosCallback); }); function getVideo(url) { $.getScript(oEmbedEndpoint + '?url=' + url + '&width=500&height=280&callback=' + oEmbedCallback); } function setupGallery(videos) { // loads 1st video getVideo(videos[0].url); // layouts video thumbs for (var i = 0; i < videos.length; i++) { var html = '<li><a href="' + videos[i].url + '"><img src="' + videos[i].thumbnail_medium + '" width="150" />'; html += '<p> <span>' + videos[i].title + '</span> <br /><br />'; html += '<span>' + videos[i].description + '</span></p></a>'; $('#thumbs ul').append(html); } // switches video when thumb is clicked $('#thumbs a').click(function(event) { event.preventDefault(); getVideo(this.href); var test = getVideo(this.href); $('#fVideo p span').detach(); $('#fVideo p').append('<span></span>'); $(this).clone().appendTo($('#fVideo p span')); $('#fVideo p span img').remove(); $('#fVideo p span a').click(function(event) { event.preventDefault(); }); return false; }); } function switchVideo(video) { $('#fVideo span.current').html(unescape(video.html)); } </script> </head> <body> <div id="fVideo"> <h1>Vimeo Gallery Example</h1> <span></span> <p> <span> current video title <br /><br /> specific text.. maybe current video info, or maybe just information about somethings else. <br /><br /> This text will be replaced once one of the links are clicked. </span> </p> &nbsp; </div> <div></div> <div id="thumbs"> <ul></ul> </div> </body> </html></code>

Related Articles

Leave a Reply