new site();
[When I worked at an ad agency we had a version of our TV reel on DVD that I created, categorized by budget. We found it helpful on a few occasions to give this to clients so they had an idea of what we could do for a given amount of money. I was then asked to put this version of the reel online, so people could view it that way instead, which was a good idea.]
This was meant to be done in a day or two and there were too many spots to hard-code, so I started looking around for pre-fab YouTube galleries (all of these spots are on YouTube). There seems to be a few really huge, elaborate ones, and one or two really simple ones. What I wanted was something in between because I needed to be able to horse around with it and get it to do a couple things the way I wanted.
So, I mashed together two separate things I found: the PHP Simple YouTube Gallery found at Webarto.com to generate the thumbnails and create links, and Fancybox to create a lightbox effect. With some further modification to allow captions and to use the new YouTube embed style, it does exactly what I need.
First, take a look at the gallery code and the demo at Webarto.com. We're going to modify it quite a bit so I won't post it here, but it's good to have that as a starting point, because you can see how it's supposed to work.
The first thing we do to make the code a bit more helpful is to make the video array 2D, so we can include captions. This means changing the loop code and the variables that are being used in the echo string. The code will now look like this:
<?php
$videos = array();
$videos[0] = array('en-3AoK2V7c','First vid caption');
$videos[1] = array('aLdLlYTpqFg','Second vid caption');
$videos[2] = array('-EP_CkFY6-o','Third vid caption');
foreach ($videos as $key=>$val) {
echo('<a href="http://www.youtube.com/embed/'.$videos[$key][0].'">'.'<img src="http://i1.ytimg.com/vi/'.$videos[$key][0].'/default.jpg"/>'.'</a><br />'.$videos[$key][1].');
}
unset($key);
unset($val);
?>
So, all we're doing is looping through the array and plugging the video ID into the embed string. You'll notice that this is using a different embed code than the one at Webarto.com, and this is because I want to use a lightbox with these videos, which will give you cross-domain errors when using the old code. We also need to use the video ID to grab the thumbnail, and then insert the caption below it.
Another thing we'll want to add to that code is some markup we can use for styling, a header for each instance of the gallery, and a clear so that each gallery gets its own line and so you can frame everything with another DIV. This modification will add a DIV tag to each instance of the videos, each caption, and each gallery:
<div class="videogroup">
<div class="header">Gallery title</div>
<?php
$videos = array();
$videos[0] = array('en-3AoK2V7c','First vid caption');
$videos[1] = array('aLdLlYTpqFg','Second vid caption');
$videos[2] = array('-EP_CkFY6-o','Third vid caption');
foreach ($videos as $key=>$val) {
echo('<div class="singlevideo"><a href="http://www.youtube.com/embed/'.$videos[$key][0].'">' .
'<img src="http://i1.ytimg.com/vi/'.$videos[$key][0].'/default.jpg"/>' .
'</a><br /><div class="caption">'.$videos[$key][1].'</div></div>');
}
unset($key);
unset($val);
?>
</div>
<br clear="all" />
To get the lightbox effect going, you have to download Fancybox, so go and do that. You'll notice it comes with a lot of files, some of which you won't wind up needing, but upload the whole thing to your webserver anyway; you can always get rid of excess later. There will be some files and a folder labeled "fancybox" to drop in the root.
Make sure Fancybox works to begin with by using one of the demos as a test. Complete troubleshooting tips are on the Fancybox site, but be sure that file references are correct in the CSS file and that you're using the correct DOCTYPE (grab it from my demo or from the Fancybox site).
Once you know your installation is correct, it's time to make it work with the gallery. First add an "iframe" class selector to the YouTube links:
...
foreach ($videos as $key=>$val) {
echo('<div class="singlevideo"><a class="iframe" href="http://www.youtube.com/embed/'.$videos[$key][0].'">' .
'<img src="http://i1.ytimg.com/vi/'.$videos[$key][0].'/default.jpg"/>' .
'</a><br /><div class="caption">'.$videos[$key][1].'</div></div>');
}
...
...and then use it in the Fancybox JavaScript code in the header, like this:
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'width' : 680,
'height' : 495,
});
return false;
});
</script>
...and if everything is set up OK, you will be in business.
This worked pretty well for me, but if you're having problems, don't forget to (1) make sure you're using the new YouTube embed code, (2) make sure Fancybox works on a normal image before trying it on your YouTube links, (3) make sure you have the right video ID, (4) copy and paste my code.
If you're still having trouble, get in touch.