This tutorial should still work, but I have an updated way to accomplish some of the tasks here. I will try to update this page as soon as I can. 3/5/2012

The Problem:

After searching far and wide for a gallery script that would allow me to show my photos and videos inline, one after another, in a simple to use shadowbox or similar viewer, I finally come up with a solution. The problem is most galleries are only set up to handle photos and not videos. Or if they do, they don’t show in the same sideshow or thumbnail view. WPG2 is the only one out there that does this halfway, but to see the videos, you have to actually leave the page you put the video thumbnail on and view the actually gallery2 page which is painfully slow and clunky.

This is the file to use to overlay video thumbnails 75×75 (thumbnails)

Or use this one (120×120 thumbnails)

The NextGen gallery plugin for WordPress seems to do a nice job with photos, but alas is still lacking video support. Along comes this post where I finally got started learning jquery: Now with this code, the video thumbnails show on your posting of a gallery, but, the videos don’t show in sequence when you are thumbing through the photos in shadowbox. You must instead click individually on the thumbnail representing the video. But how do you know which one is the video? Another problem.

Now, for the solution.


  • 1) Install NextGen Gallery and the Shadowbox js plugin on your wordpress site
  • 2) Place the javascript code below into the footer.php of your theme near the end but before the < /body?> tag
  • 3) Place the film.php and film.gif files into your “/wp-content/gallery/” folder
  • 4) Go to the “Effects” tab in the NextGen Gallery|Options, Set “JavaScript Thumbnail effect” to “Custom” and put code below in the box
  • 5) Change the settings in the Shadowbox js plugin to support *.flv files
 class="shadowbox" rel="shadowbox[%GALLERY_NAME%]" 

**Now Every Time you want to use the feature**

  • 1) Upload your photos, including an image for the thumbnail of your video, to a new NextGen Gallery (I use Picasa and it automatically creates a video thumbnail on export for you)
  • 2) Upload your video(s) to your normal WordPress gallery and copy the URL(s) (you may want to use an FTP program for this)
  • 3) Put the URL(s) for your video in the “alt” textfield of each video’s thumbnail when you edit the NextGen gallery
  • 4) Start your “descriptions” with the text “Video” when you edit your NextGen gallery on each thumbnail with a corresponding URL



I modified the above script from Peter Velichkov to modify the “rel” tag of the video thumbnail which allows shadowbox to include it inline with the other photos.

Place the following javascript code below into the footer.php of your theme near the end but before the < /body?> tag


jQuery(document).ready(function($){ $(".ngg-gallery-thumbnail a").each(function (arr)
{ if ($(this).attr("title").substr(0,5)=="Video"){ var thereltag = $(this).attr("rel").substr(0,22); 
$(this).attr("rel", thereltag + ";width=512;height=348"); $(this).attr("href",$(this).children("img").attr("title"));
 var thesrctag = $(this).children("img").attr("src"); $(this).children("img").attr("src", "/wp-content/gallery/film.php?path=" + thesrctag); } }) });

This is a modified script provided by a user. I have not tested it.

jQuery(‘.fancybox [title*=""]‘).each(function()
{var title = jQuery(this).attr(‘title’);
var desc = jQuery(this).parent().attr(‘title’);
jQuery(this).attr(‘title’, desc);
jQuery(this).parent().attr(‘href’, title);

You must also put:
< script type="text/javascript" >
at the begining of the code and then:
< /script >
at the end of the code WITHOUT the spaces to make it work, but I couldn't do it here or it wouldn't show up for you to see.

Now, how do you get the thumbnails to look like a video filmstrip? For this “extra fancy” add on that you may notice in the script posted above, I included a php function that uses the GD graphics library to modify the videos thumbnails to add a “filmstrip” overlay. This really makes your videos stand out from the photos in a gallery posting and when you want to just see videos, click on those. Just like the code above, be sure to REMOVE the spaces between the bracket and the ? of the PHP opener and closer to make it work on your page.
The image to use is posted above and script below. Save it as film.php and the image as film.gif and save them where you want. Then adjust the the path in the above script to match the location on your site. (eg. “/wp-content/gallery/film.php?path=”)

Save this as: film.php and then also put film.gif in the /wp-content/gallery folder.

 < ?php // this script creates a watermarked image from an image file - can be a .jpg .gif or .png file // where watermark.gif is a mostly transparent gif image with the watermark - goes in the same directory as this script // where this script is named watermark.php // call this script with an image tag //  where path is a relative path such as subdirectory/image.jpg $imagesource = $_GET['path']; $filetype = substr($imagesource,strlen($imagesource)-4,4); $filetype = strtolower($filetype); if($filetype == ".gif") $image = @imagecreatefromgif($imagesource); if($filetype == ".jpg") $image = @imagecreatefromjpeg($imagesource); if($filetype == ".png") $image = @imagecreatefrompng($imagesource); if (!$image) die(); $watermark = @imagecreatefromgif('film.gif'); $imagewidth = imagesx($image); $imageheight = imagesy($image); $watermarkwidth = imagesx($watermark); $watermarkheight = imagesy($watermark); $startwidth = (($imagewidth - $watermarkwidth)/2); $startheight = (($imageheight - $watermarkheight)/2); imagecopy($image, $watermark, $startwidth, $startheight, 0, 0, $watermarkwidth, $watermarkheight); imagejpeg($image); imagedestroy($image); imagedestroy($watermark); ? >

Be sure to REMOVE SPACES between the bracket and the "?" in the php opener and closer. I inserted them here so it wouldn't execute on the page.

Example of a working gallery from our trip to the Creation Museum: