You are here

Home ›

Drupal Video Gallery with jQuery

Submitted by koppie on Wed, 08/31/2011 - 20:40

What's new?  Oh my goodness, so many things I don't have time to talk about.  But I absolutely have to share this.  I spent all day trying to figure it out.  Congratulations, net wanderer, you get to benefit from my wisdom.

The task: Create a video gallery in Drupal.  The client wants multiple videos attached to a single node, with thumbnails.  When you click on a thumbnail, the video opens in a larger box on the same page.  The videos will either come from youtube or vimeo.

What you'll need:

  • Drupal 6 or 7
  • Embedded Media Field
    • Media: Vimeo
    • Media: Youtube
  • jQuery UI
  • jQuery Update
  • Customized theme template (eg. page-node.tpl.php)

Embedded Media Field requires CCK so I'm assuming you have that, and all the other dependencies.

Step 1

Create a custom video field in your content type.  We use Embedded Media Field because it automatically parses the youtube/vimeo link and gives us useful information like which provider it is, and creates a thumbnail which is stored locally.

Step 2

Add the following code to your theme template file:

 <?php
 // Jquery display for videos.  $result passes the nid to the view so it will display the results for this page.  If no results, the view does not display.
 $result = $node->nid; //this grabs the current node ID
 $viewName = 'videos';
 $display_id = 'default';
 $vid_delta = 0;
 $videos = $umrdb->getall('SELECT field_video_embed, delta, field_video_value, field_video_provider FROM content_field_video WHERE nid=?', $result); //here we're pulling info directly from the mysql database using a custom function
 if ($videos[0]['field_video_embed'] != ''): //if there is no video, this box disappears
 ?><div id="property-photos" class="ui-corner-all ui-widget-content"> //custom theming
 <h2 class="ui-widget-header ui-corner-all">Video</h2>
 <div id="bigvidwrap">
 <iframe width="560" height="345" id="vidhere" src="http://player.vimeo.com/video/8428869" frameborder="0" allowfullscreen></iframe> //one static video to start us off
 </div>
 <div id="tinyvidwrapper"> //here's where the thumbnails go
 <div id="tinyvidwrap">
 <div class="tinyvids">
 <?php foreach ($videos as $item) {
 if ($item['delta'] != '') {
 $vidprovider = $item['field_video_provider'];
 $vidid = $item['field_video_value'];
 ?><img onclick="changeText('<?php print $vidprovider ?>','<?php print $vidid ?>')" src="/sites/default/files/emvideo-<?php print $item['field_video_provider'] . '-' . $item['field_video_value'] ?>.jpg" width="80px"/><?php ; //this pulls the thumbnail from the local server, and sends a signal to the javascript we'll be writing later
 } ?>
 <?php } ?>
 </div>
 </div>
 </div>
 </div>
 <?php endif;
 ?>

Step 3

Create a javascript and put it in the <head> section.  Depending on how your theme is constructed, that might be the same template file as above.

 <script>
  function changeText(provider,ID)
 {
 if (provider == "youtube") {
 document.getElementById("vidhere").src="http://www.youtube.com/embed/" + ID;
 } else {
 document.getElementById("vidhere").src="http://player.vimeo.com/video/" + ID;
 }
 }
 </script>

We've sent two variables to the javascript: the provider (where the video is coming from), and a unique identifier that the provider uses to identify the video.  There's a simple if/else statement to create an embed link if it's youtube, or if it's vimeo.  It finds the object with the ID #vidhere, which is the iframe we created above, and it replaces the source of the iframe with the new embed code.

Put it all together, and you get this:

Sorry about the poor markup; I'm not used to pasting code on my blog.  Right now I'm too busy to make cosmetic changes to my personal site.  But at least my code is pretty clean, and I added lots of //comments to make it easier to understand.

Enjoy!

Powered by Drupal