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: http://blog.creonfx.com/javascript/wordpress-video-galleries-with-nextgen-and-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.
Summary:
- 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
Details:
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*="www.youtube.com"]‘).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:
[nggallery id=20]
can’t get the thumbnails to show
Please update the article as soon as you can, I really need this, thanks in advance!
seems doesn’t work. any update available?
I was so excited to find this post, but I can’t get it to work. My setup mirrors exactly what you’ve mentioned here, but instead of it working, I’m getting a “broken link” for the image, and the video will not load. I’m hoping this is related to your plans to include an updated method soon. Please let me know if that is the case, or please offer some tips on how to fix this. Thanks so much 🙂
Hi guys,
this is super easy to do. I’m doing it with youtube vids and using PrettyPhoto as lightbox (but I think it will work with any lightbox clone supporting video):
1. Uploaded your images like normal
2. edit your gallery and for the image you want to be the video, change the title/art to the full youtube url (http://www.youtube.com/watch?v=somecode)
3. be sure that your gallery template shows titles in the thumb links
4. add the below jquery to find the thumb links that have http://www.youtube.com in the title, copy the title to the href and put something else as title instead:
$(‘.album_thumb a[title*=”www.youtube.com”]’).each(function() { var title = $(this).attr(‘title’); $(this).attr(‘href’, title); $(this).attr(‘title’, ‘Play video’);});
Of course you might have different classes on the thumb links, so change that in the code.
This way the page links are changed on load and when the lightbox clone finds the youtube link in the href, it will play the video.
Could be expanded to use the description of course, it you want to keep a nice title that you can edit in the gallery itself.
@matiyin
I like your description and the code, however it was not easy at all… Having said that, I ain’t no javascript pro.
I use NEXTGen with the EasyFancybox plugin. I have the automated youtube link recognition on.
The difficulties I faced:
1. You used U+2018 and U+2019 instead apostrophe U+0027, so your code (copying and pasting) didn’t run. (man, that took me hours to figure that out, first I was checking everything with your code…)
2. Plus I needed to remove ‘a’ from the selector – it was not recognized by the jQuery call.
3. There is one more thing, when you insert the script into a theme e.g. Elegant Themes through their ePanel, a different format is necessary for the successful execution of the code, you need to use ‘jQuery’ instead of the ‘$’
4. The CLASS here is ‘fancybox’
So modifying your code and adding the part that copies the Description from the Thumbnail of the video to its title, so when you hover over it gives a neat title rather than the youtube url:
jQuery(‘.fancybox [title*=”www.youtube.com”]’).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);
});
And now it’s working nice.
Thanks, and enjoy,
Mark
Apologies matiyin, it was not you probably, but the blog that changed your apostrophes.
Dear Mr. Admin, please turn of the functionality of the blog engine that crapifies the apostrophes – it causes the codes not working when you copy&paste them.
Viva la U+0027!
Thanks,
Mark
Just to have the full code in place, you need to bracket the above code as it follows before you insert it on the epanel. So this code is copy&paste ready EXCEPT the APOSTROPHEs.
jQuery(‘.fancybox [title*=”www.youtube.com”]’).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);
});
Ok, it looks like I am flooding the blog; that is not my intention. But the javascript call for the code just doesn’t show up. Maybe now:
—-put the above code here—-
Cheers,
Mark
Hello, im new on this… i just followed this tutorial i got the gallery working but it doesnt display de video :S, i have no idea whats wrong..
http://ulm.mx/cuerpo-docente/
First image is supposed to be a video
i have tried youtube videos and internal videos, but nothing works
Hi, im trying to get this done… but i cant
ive done everything in the tutorial but it doesnt show up the video
ive tried local videos and youtube videos…
http://ulm.mx/cuerpo-docente/
First image is supposed to be a video
@mark @matiyin
I’m confused as to where you copy and paste the JQuery. I’ve installed EasyFancybox and enabled the auto youtube detect. Ive created a gallery with the image I want and changed the title to the Youtube watch url. I am lost at this point. Please help. mark@dayonelighting.com
page url: http://dayonelighting.com/products/tilt/