As you might know by now, I’ll be presenting a session at Do It With Drupal on December 10. If you didn’t know, get a ticket, and then come back here! I’m currently building a YouTube clone with Drupal in my spare time. When I’m done with it all, I get to come talk with you folks about how I did it.
Obviously, I’m not going to replicate the entire YouTube site. There comes a point of diminishing returns, especially for something I’m doing for fun. So I have to pick and choose what pieces to build. (For the record, there will also be parts that I believe will be improvements on YouTube; not difficult, since I’m building it with Drupal.)
The video slide show on YouTube’s front page would have been a case-in-point. It’s built in Flash, and I figured I would skip it, since it’s just eye candy. Normally for that, I would use jCarousel or Views Slideshow, but neither replicates YouTube’s functionality, and they seemed out of place for this slider that slides 5 videos at a time. But then I remembered someone telling me about the jQuery Cycle plug-in, by the same author of the jQuery Media plug-in.
How I Did It (in 20 minutes, nonetheless)…
The solution isn’t completely straight-forward, because of needing to switch out 5 items at a time. However, Views 2 has some really great tools to help out there.
After installing the modules I need (jQuery Plugins, which includes the jQuery Cycle plug-in, and jQ, which offers a unified developer’s library and will offer a hopefully easy upgrade to Drupal 7’s upcoming core Centralized jQuery plug-in manager), I rolled up my sleeves (and Firebug for examining the style elements).
First, I built a view with 25 nodes, so it could be easily divided by the 5 thumbnails in the slide show. It’s sorted by the daily most popular. I’m not sure how YouTube chooses their “Videos being watched right now”, but I figure this will give a fair rendition.
While building the view, you’ll notice a little link labeled Theme: Information. Become friends with Theme: Information. She will help you solve some otherwise tough problems if you get to know her.
I clicked on that little link, and was presented with a long list of candidate theme template overrides. I took a quick look over, and decided on a Style output template, which prints out each row of data. I then simply overrode that template to split the rows into groups of five, and to invoke the jQuery Cycle plug-in.
<?php
// $Id$
/**
* @file views-view-unformatted–videos–block-4.tpl.php
* Default simple view template to display a list of rows.
* The filename corresponds to this particular view; if reproducing on your own site,
* you’ll need to choose an appropriate file from the Style output group of Theme: Information.
*
* @ingroup views_templates
*/
// Make sure the jQ module is enabled, so we don’t get PHP errors if we disable it in the future.
if (module_exists(‘jq’)) {
// I’m using jq_add here. It assumes you have the jQuery Cycle plug-in installed. That plug-in
// comes bundled with the jQuery Plugins module, but you could also just drop it into a
// /plugins or /sites/example.com/plugins folder and call it with the same method.
jq_add(‘cycle’);
// Here’s the actual call for our cycle slide show plug-in.
// I’m using the ‘shuffle’ effect, shifting the images w/ top & left, slowing it from the default
// with ‘timeout’, and using ‘pause’ to allow a pause on mouse hover. There are lots of cool
// effects; see the plug-in home at malsup.com/jquery/cycle/.
$js = <<<js
$(‘#cycle-videos-$id’).cycle({
fx: ‘shuffle’,
shuffle: {
top: 30,
left: 15,
},
pause: 1,
timeout: 10000
});
js;
// Make it degrade gracefully in non-javascript browsers.
$js = “if (Drupal.jsEnabled) { $(document).ready(function() { $js }); }”;
drupal_add_js($js, ‘inline’);
}
?>
<div id="cycle-videos-“>
<?php
$count = 0;
$row_count = 0;
// Cycle through all our divs.
while ($count < sizeof($rows)) {
// Each of these divs will be a separate frame in the cycle slide show.
print ‘
$inner_count = 0;
// Now display 5 rows of data, each of which is just a thumbnail in this case.
// Note this slide show is not limited to images. It could be text, videos, whatever.
while ($inner_count < 5 && $count < sizeof($rows)) {
print ‘
n”;
$inner_count++;
}
print “
n”;
}
?>