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]
So once you have all this setup how do you get the NextGEN gallery to allow you to upload a video file? Or am I missing something really simple here?
You upload video using the built in media section of wordpress and then put the URL of that upload into the NextGen gallery “alt” field. Not as slick as I would like, but the finished product works great!
Hi David;
First of all I am please to read the heart you have for our Lord Jesus.Keep it up ! .
I have been working on a website where I need used above guide but some how its opening 2 boxes for images as well as video.If I open some video it shows me its big image as well as video.With image it opens 2 boxes for same image.One is from NexGen and one of shadowbox.Can you please help me on this ?
Thanks;
See new addition #4 in the summary above. You need to change the effect code in the nexgen options for the shadowbox popup to match like above.
David,
But to get to the alt field for an entry in NextGEN gallery don’t you need to have an item added already. I haven’t seen the option to change an alt field without adding an item and then going back to edit it.
David,
Disregard. I just read your updates. Thanks for the assistance.
Thanks for this refinement of Peter’s code. But I’m an imbecile and can’t get the path stuff straight to make your version work correctly. With Peter’s version, I got everything working, but the shadow box forward and backward buttons disappeared. With yours, I’m getting a grey thumbnail with the video URL over it, but the shadowbox function pretty much works as advertised (although you can’t navigate from a picture to a video). Anyway, can you give a little more direction on making the js path statement work, and does anything have to be modified in the php file? I’m calling the js file from a child theme header script tag, and have it in my child theme scripts folder. It’s getting pulled in correctly, just something wrong with accessing the php and/or the gif.
if you are getting a gray thumbnail, the problem is with the php that overlay’s the thumbnail with the filmstrip gif….not sure what the problem is. Let me try to set it up on another site and see what happens.
Thanks. So I guess you’re saying that nothing should be changed in the PHP file. I also tried putting that file and the gif together in the /wp-content/gallery/ folder, as is your default example, but that didn’t work either. I really haven’t struggled through the code enough to figure out what’s pointing to what, so I’m looking for easy answers first! 😉
hum…after trying it on another site of mine, I get the gray box with the link to the movie too! not sure what the problem is yet…works great on this site. Maybe I left something out from when I set it up…
here is a link to where you can see how it should work:http://www.smilecouple.org/2010/01/27/creation-museum-is-a-wonderful-experience
No, you shouldn’t have to modify the php as far as I can remember…
Hmmm. Does your solution require the JWPlayer, too? I’m also trying to embed some YouTube videos and such. Not that this should explain the thumbnail problem.
Forget that last question. I just linked to an FLV resource, and the JWPlayer opened right up. YouTube vids run in the YT player within Shadowbox.
Boy, this was a simpler solution than I thought. I had tried fiddling in many ways with the script, thinking that my source paths were somehow different than yours. The solution for me – in the javascript, remove the leading slash from the path to film.php. So, assuming you follow drtech’s instructions for placement of film.php and film.gif, line 8 of the script should read
$(this).children(“img”).attr(“src”, “wp-content/gallery/film.php?path=” + thesrctag);
Thanks again for this tutorial
This is exactly what I want to do on my website. The problem for me is that I’m a bit leery relying on a plugin for my gallery functionality, even if it is a highly popular plugin like NextGen. I worry that one day a WP update will break NextGen and the author will no longer be around to fix things.
I’ve been wondering if there is a way to do this with the core gallery functionality in WP. I think I have an idea which might work. Create a WP gallery consisting of photos and *thumbnails* of the videos. Since the video thumbnails are pictures, they can be part of the WP gallery.
Next, for each video thumbnail, go into the gallery manager and change the “Link URL” to the path to the video (in the media manager, click “Show” next to each video thumbnail).
Unfortunately, I can’t test this because there is currently a bug with the WP “Link URL” functionality: http://wordpress.org/support/topic/343988?replies=23.
Unless I’m misunderstanding how the “Link URL” works, I think this approach should work once the bug is fixsed. If it does, it may be a good alternative to the solution you’ve described.
I’ve created a request to add this feature into the core WP. Please go to the link below to vote for it!
http://wordpress.org/extend/ideas/topic/mixed-media-galleries
Given the status of this bug, and the poor implementation (IMO) of the standard WordPress gallery, it doesn’t seem extra risky to rely on NextGen, which has a much better user interface (again, IMO) for a non-tech-savvy client. But you’re probably right that the stock gallery can be modded to do pretty much the same thing. I’m still having a problem in IE with NextGen and either video mod (drtech’s or Peter’s) – all I get in the shadowbox is the video preview image, and not the actual video. Might be where I’m loading my scripts, but I’m not sure. I’m looking back at comments on Peter’s page for ideas.
Hmmm, now it looks like David’s (drtech’s) gallery also isn’t working correctly in IE. I’m just trying it now and getting a shadowbox preview image, and not an embedded video player.
I take that back. It happened when I copied my url from Firefox into IE, and it wasn’t the root URL (included a comments named anchor). That, in itself, is kind of strange, and I guess a little bit of a bug.
Hi, again, David
So, I have had a heck of a time getting this thing to work 100%. For days, I couldn’t get the shadowbox videos to function in IE, but this was on a local install, and there may also have been an swfobject.js conflict (maybe from the imagerotator, I don’t know). When I finally decided to reinstall my deployment server WP and just add Shadowbox, NextGen, your scripts and images, and my NextGen mods (for large thumbs), I got the shadowbox function working, but lost the video thumbnails (they are instead superimposed by the title of the video on a white/grey background). I’m thinking I need to know some of your environment settings. Particularly, how do you (or do you) have permalinks setup in WP and NextGen, and are you using a full root URL in your General WP settings or leaving off the www (eg, http://www.smilecouple.org or just http://smilecouple.org)? Anything else you think would be pertinent would be great. On my local install, I couldn’t get the film overlay to work until I modified your path statement, first removing the leading slash and then, when I switched my permalinks settings, going up a directory before the leading slash (../wp-content ….), but now nothing I try works. Thanks for your help when you have a chance.
Jasman, in terms of the risk in using NextGen, I am trying to better understand its implications. If I create a bunch of galleries with NextGen, and then uninstall NextGen, will those galleries still be visible/accessible? In other words, is the NextGen plugin required to display galleries it created, or is it only required to create new galleries?
@Roger – Yes, you need NextGen to display NextGen galleries. One thing you might do is use your media manager to upload your media files and then import those files into NextGen. That way, if you ever uninstall NG, you should be able to recreate basic WP galleries pretty easily. But I just played around with that myself, and I have to say, I had forgotten how bad the WP gallery is. It’s just not intuitive in any way and lacks good back-end controls. I think WP should bring NG in as a core function of the package.
Can’t understand why, but it doesn’t generate picture with video thumbnail.
http://spitsin.com/?page_id=18&album=1&gallery=1
First picture in album.
The problem is the same as Jasman has (video name on grey background). So please if you solved it, publish the solution.
I haven’t solved it yet, but I haven’t had time to look at it. When I try to use it on a different site it gives me the same gray background as you guys are getting! I don’t know what is different on this (my first site I used it on) than the others, but something is up. Might be my apache rewrite settings? I will try to look into it soon…
Your suggestion about apache mod_rewrite is intriguing. I’ll see if I can figure anything out, also.
Any chance of posting your top-level and/or gallery-level .htaccess code?
Well, I came up with my own sloppy solution, but it might work for others here. I used a jQuery plugin and an extra line of code in the javascript file to parse out only a relative path (instead of a full path, with the protocol and domain) to my thumbnail images.
First, get the jQuery URL Parser by Mark Perkins (http://projects.allmarkedup.com/jquery_url_parser) and call it in your page (I included mine below the footer in my theme, which is also where I included the above script, which I called nextgenvideo.js, both saved in my WordPress child theme in a folder called scripts). Note that there’s also a beta “advanced” version of this script called the URL Toolbox, but I opted to just get the released, older script in compressed form (http://projects.allmarkedup.com/jquery_url_parser/jquery.url.packed.js).
Then modify the above script (in my case, nextgenvideo.js) to parse out the appropriate segments of the path to your thumbnails from the full URL (see the var newsrctag line). In my case, this script just wasn’t working with a full URL path to the thumbnails. So, for instance, using the following modified script, I end up with an image source path that looks like “/wp-content/gallery/film.php?path=media/thumbs/whatever.png”. You might need to adjust either part of that path by changing the hardcoded part to film.php in the script and/or the appropriate segments (and slashes) of the path to your thumbs.
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=640;height=385”);
$(this).attr(“href”, $(this).children(“img”).attr(“title”));
var thesrctag = $(this).children(“img”).attr(“src”);
var newsrctag = jQuery.url.setUrl(thesrctag).segment(2) + “/” + jQuery.url.setUrl(thesrctag).segment(3) + “/” + jQuery.url.setUrl(thesrctag).segment(4);
$(this).children(“img”).attr(“src”, “/wp-content/gallery/film.php?path=” + newsrctag);
}
})
});
And, in my case, voila, it works. I created my own variation of the film border transparency thumbnail, too, just making sure it’s the same size as my NextGen gallery thumbnails (150×150 in my page).
Thanks again to David for his tutorial, and I hope this helps someone else out.
Thanks for finding a work around! I will see if I can come up with an easier solution down the road…
By the way, I just added the NextGen Gallery widget to my homepage, and to make the same mod take effect there just add “.ngg-widget a” to the query (“.ngg-gallery-thumbnail a, .ngg-widget a”).
Hi, this modification is perfect for my video gallery. Thank you very much. I only need one more feature. How to increase one text under the video player? It is possible? I need write the credits of the video and other information specific to each video.
Thank you very much.
Ramiro.
Hey there,
Thank you for an awesome script, helped me out a lot! It worked perhaps a bit too good, since now I’ve got a question that I was hoping you could answer.
If I want to include a separate image/link in an existing gallery, what code should I use? I don’t want the image/link to be added to the NextGen-gallery by default, I was hoping that I could use something like:
rel=”shadowbox[id]”
so that the image/link will be available in the shadowbox scroll.
Thanks again for the great script!
//Lucas
I’m using the thesis theme (quite the newbie after 1 week). How could this be adapted to thesis since it has the option of placing jquery scripts on individual pages? When you say place the code in the footer, I’m confused since thesis has a custom folder where things should be customized and, of course, there’s no footer file in there. I don’t want to touch the core files. I’m sure there are multitudes of other thesis users who could use this solution. Thanks in advance.
Here’s a link to what I’ve managed using Velichkov’s original solution:
http://howtomakeadesignerhandbag.com/testing/a-video-test/
It only opens the thumbnail when clicking, not the video.
Ok, the only progress I’ve made is getting the film strip over my thumbnail, thanks to Jasman. Is anyone here familiar with the Thesis theme? I really don’t know where to add the javascript since there’s no header. I presently have it on the gallery page in Thesis’ custom Embed Your Own JavaScript option. Here’s what I have so far:
http://howtomakeadesignerhandbag.com/testing/a-video-test2
Thanks in advance
Also, is this limited to certain types of video? Are avi, flv, mp4 ok? And this JWPlayer… Do I need to install that separately?
Hi,
thank you for this so cool feature added to NGG.
i had some trouble but it’s ok now, i will explain furthermore the problems and the solutions i found next week, (on my other PC)
regards,
ben
@Ramona – I don’t know if you’ve given up on this and I don’t know anything about the theme you’re using, but it sounds like you need to read up on making child themes, which is the way to avoid modifying any core files in a stock theme. My scripts are in my child theme, and any mods to the various php files (includes that build pages) are in my child theme’s functions.php file.
Also, JWPlayer is enabled through Shadowbox JS plugin for providing FLV support. As for file types, check the JWPlayer site/forums for info. From what little I know, FLV is a container for video in Flash, and can contain various actual file types (H.263 encoding, .mp4, .m4v, .mov… not divx or xvid [avi]). But Shadowbox also supports swf and qt (the latter of which might support avi, I’m not sure). All of my files are contained within flv, and that’s common for videos streaming on the net.
Works well for shadowbox, but i had trouble to implement the gif/thumbnail creation.
First problem was the size of the thumbnails (100×75 by default) – easy to correct in ngg
Second problem was due to my URL website. i don’t know why but i had to remove the root URL in order to make the deal
i.e. call film.php?path=gallery-path/thumbnail.jpg was working but not path=http:fullURL/gallery/gallery-path/thumbnail.jpg
i had to remove the full URL of the call :
$(this).children(“img”).attr(“src”).replace(‘http://full-url/wordpress/wp-content/gallery/’,”);
and everything is ok !!
thanks a lot again
(new hidden captcha seems working 😉 )
i cannot get this working at all….. i have tried everything im on version 3.0.1
http://misssenegalus.com/miss/?page_id=25&album=1&gallery=1&nggpage=3&show=gallery
that very last image with the flag is the thumbnail..
in my header i have added
ive uploaded the js with the code above
i have shadowbox installed and tested it works im not sure what im doing wrong. Can anyone help me?
im on aim:demo7up skype:dem07up …
I cant even get the image overlay working some1 please please please help!
i have a question i got everything working great
but was wonder if this could be done.
http://misssenegalus.com/miss/?page_id=25
i have created albums to display on the page above i was wondering if their is some kinda if statement or java i could use to detect the word “video” from an album title and change where it says “1 photo” to “1 video” any help is much appreciated.
i have a question i got everything working great
but was wonder if this could be done.
http://misssenegalus.com/miss/?page_id=25
i have created albums to display on the page above i was wondering if their is some kinda if statement or java i could use to detect the word “video” from an album title and change where it says “1 photo” to “1 video” any help is much appreciated.
I don’t know too much on how to actually manipulate javacode…i just modified this to work for me…so someone else will have to help out…
i think there are some server settings (htaccess maybe and or php setup ) that really effect your chances of this working. Not sure, but some people can not seem to get it to work at all and some have no problem. As of writing this, it is hosted on a 1and1 server and using wordpress 3.1 alpha. If someone could figure out why it does not work for some people that would be great!
This worked for me!
host: hostgator
Wordpress 3.0.3
Next Gen Gallery: 1.7.0
GREAT stuff. I have NO idea why Alex Rabe hasn’t added this functionality yet as a lot of people request it. Hell, I’d even donate if he did.
Anyways, I’ve added Titles and Descriptions to the thumbnails from this tutorial:
http://narasopa.com/seoblog/2009/02/adding-title-and-description-to-nextgen-gallery-thumbnails/
Which works awesome but it displays the link title so I removed the title and just added the title in the description.
And Now My Question: Is there a way to hide the word VIDEO from the titles? please take a look here: http://www.joshsoskin.com/work
Thanks for the help!
Has anybody got this working on WAMP, i.e. your local computer?
Thanks
Danny
Getting away from WordPress, the best gallery software I have found for handling both images and videos is Zenphoto (http://zenphoto.org/).
Works beautifully out of the gate for me, but I have not been able to integrate it effectively with WordPress or Drupal or other CMS.
I’m looking into trying this. Has anyone tried this? http://wordpress.org/extend/plugins/ngg-video-extend/
Please let me know if you’ve had any luck with it as the new version of wordpress does not work with this hack for some reason.
having problem with the images. i changed the css location of the images but is still not working. how it call them?
Can you tell me how to get the cool thumbnail rollovers. Your code says something about class=”zoom-icon fancybox”. For the Person with Thesis, easiest way is to install the Thesis Openhook plugin and then copy the javascript above into the WPFooter section of Openhook and save.
Thanks
Paul
thx for you efforts!! I’m looking forward to the new tutorial 🙂
having trouble getting the thumbnail to show, it is duplicating the URL