For one of my recent WordPress projects I needed an easy way for the client to organize and display videos. Unfortunately my hope that NextGen Gallery plugin, which I already used for the images, will do the trick vanished after couple of clicks and I started googling for a solution. Since neither google nor Worpdress Plugins page gave me anything reasonable I started rethinking the situation:
- I was already using Shadowbox which allows displaying videos
- I already had jQuery enabled in my WordPress Theme
- I can use the alt field in the NextGen options for the url of the video
So what I needed was to modify the generated from NextGen anchor (the href attribute) and somehow to distinguish if the thumbnail is for image or video.
Here is the script I wrote which does both things:
jQuery(document).ready(function($){
$(".ngg-gallery-thumbnail a").each(function (arr){
if ($(this).attr("title").substr(0,5)=="Video"){
$(this).attr("rel","shadowbox;width=405;height=340");
$(this).attr("href",$(this).children("img").attr("title"));
}
})
});All you have to do to make it work is:
- Include this Javascript somewhere on your page
- Put the url for your video in the alt textfield
- Start your descriptions with “Video”
If you found this script useful consider donating. Hosting isn’t free you know. Thanks!
Comments
Comment by Julian on 2009-04-09 22:32:37 +0300
Worked like a charm! That was a great help thank you for sharing!
Kudos,
Jul
Comment by DoubleSixx on 2009-08-15 06:06:48 +0300
Hello,
I was hoping you could help me. I would like this feature on my WordPress site. I have NextGen, and ShadowBox installed. Where exactly am I suppossed to paste you script ?
I tried in the header.php
How do I get the video thumbnail to appear ? Do I have to create a new page or post and insert video ? Or add a NextGen gallery ?
I’m confused, any help will be greatly appreciated, thanx in advance.
al
Comment by DoubleSixx on 2009-08-15 17:02:57 +0300
Could you please post more information or e-mail me please ?
Comment by Peter on 2009-08-15 21:39:35 +0300
@DoubleSixx – generally it works exactly the same as when you upload normal image (this will be your thumb) but instead of opening a bigger version (in shadowbox) when you click on it you will see the video.
The js is added wherever you want since it is activate on dom ready. Also you should have jquery installed
Comment by DoubleSixx on 2009-08-16 00:19:07 +0300
@Peter – Thanx for the help. I just looked, and the shadowbox.js is in wp-content\plugins\pb-embedflash\js not in NextGen, will that prevent your VideoGallery script from working ? I saw referecnes to jquery in some of my files, but I don’t think I have it installed. Do I need jquery installed some where specific ? I really appreciate all your help, thank you.
Comment by Peter on 2009-08-16 00:39:19 +0300
@DoubleSixx – you need some basic javascript knowledge to make this work. If you have jquery and just follow the instructions above you should not have any troubles. Try getting some frontend developer to help you.
Comment by Matt on 2009-09-04 00:01:40 +0300
I was able to get this to work… sort of. It opened the thickbox overlay with the image I had insterted the video url. The problem is that the video does not play, actually it just becomes and empty box. So what am I supposed to do to get this to actually play?
Comment by Peter on 2009-09-04 10:14:52 +0300
@Matt – Have you started your description with ‘Video’? Send me a link on my mail and I’ll check it out.
Comment by Eric on 2009-09-05 13:35:42 +0300
I get the same issue – with thickbox it just stays white, lightbox makes it look like it’s continually opening, another one of the options just shows the thumbnail… I do like thickbox. Any other thoughts on how to get it to work with that? And/or perhaps how to load up AFC FLV-Player or FLV Gallery (some sort of Flash player around the video?)
Comment by Peter on 2009-09-05 21:50:03 +0300
@Eric – Links guys? Can’t help without seeing. The hack uses flv players, it can not play directly video. Put url to youtube. Try this url http://www.youtube.com/v/d7JRmGp9DgQ
Comment by Eric on 2009-09-06 00:48:39 +0300
Thanks for looking into this. I’d appreciate it if you could edit the post to not show the link, but the page I’m trying to work on this is at: *LINK* – I can tell that the issue is that the script you wrote doesn’t seem to be finding and replacing the tags in the tag. I’m not sure why… If I manually change the “rel” attribute, it will popup the thumbnail image in the simple video player shadowbox stye, but I need your method for automatic replacement. Any help would be greatly appreciated.
Comment by Peter on 2009-09-07 11:24:02 +0300
@Eric – as I explained this does not include flv player, you have to use some of your own. Just try with the url i gave above and see if it works.
Comment by Eric on 2009-09-10 02:56:21 +0300
Thanks Peter. Unfortunately that won’t work either, and I can’t tell why it won’t. I have installed the JW FLV Player, as suggested in the Shadowbox instructions, and tried manually referencing it via the code:
rel=”shadowbox;width=520;height=390;options={player:flv}”
However, that just offers me a link to download the .flv file (no shadowbox popup). The YouTube link option just never starts playing.
Any ideas as to what I’m doing wrong here? I’d be happy to Paypal you some funds to help me get this working. Feel free to email me directly.
Comment by Peter on 2009-09-10 13:09:00 +0300
contact me on my skype peterv-at-work
Comment by Matt on 2009-09-14 20:09:07 +0300
I have made this work now with the youtube link your provided. Now what I need to do is to get this to work with the flowplayer or jw player and self hosted flv files. Any insight into how I accomplish this?
Comment by Matt on 2009-09-22 01:59:38 +0300
Can anyone out there help me figure this out? I have my own flv’s living in wp-content/videos and I want to use this hack to get these to pop up and play just as I did with the YT link given above. Any help would be great. Thanks….
Comment by Peter on 2009-09-22 23:41:18 +0300
@Matt – Yeah we got that working with Eric. Just install JW player in the correct location
Comment by Matt on 2009-09-23 22:33:19 +0300
I have the WordTube plugin installed in the plugins directory. I also installed the JW player in a folder called “mediaplayer” inside the nextgen-gallery folder. This does not seem to work so can you let me know where I am supposed to install this. Thanks!
Comment by Peter on 2009-09-25 14:00:08 +0300
@Matt – sorry mate I’ve been quite bussy recently, contact me on my skype
Comment by Xavi on 2009-09-28 18:34:18 +0300
Great tutorial, i couldn’t find any other to put some videos with nextgen gallery. Can this be adapted to use the lightbox effect?
Comment by Peter on 2009-09-29 00:16:47 +0300
@Xavi – which exactly? Check it how it will look here http://www.shadowbox-js.com/
Comment by Sabelli on 2009-10-09 21:41:51 +0300
Thanks Peter!! Works awesome. I was initially having issues using with Vimeo. After the shadowbox opened it was redirecting to the vimeo website. I resolved the issue by using part of the embed url instead of the actual url to the video. eg. http://vimeo.com/moogaloop.swf?clip_id=video id number here
Works great!
Thanks again.
Comment by Tim MacKenzie on 2009-10-15 20:30:24 +0300
Having trouble executing your script when placed anywhere on the page:
Parse error: syntax error, unexpected T_FUNCTION, expecting ‘)’ in /home/dtn/public_html/wp-content/themes/hybrid-news/header.php on line 31
I’m using Justin Tadlock’s Hybrid Theme and have attempted to apply the script in the header.php file as well as in various locations on the page using the Hybrid-Hook plugin built into the theme. I also have a reference to Jquery in the header:
Comment by Sabelli on 2009-10-16 16:50:01 +0300
Peter, Just ran into in issue. Everything works perfect but the nextgen-gallery widget breaks with shadowbox enabled. I’ve been digging for a solution for a while and it seems to be unresolved in the wordpress forums. http://wordpress.org/support/topic/232832?replies=5
So my question… Is there another thumbnail effect that will accomplish the same thing besides shadowbox? Thanks again for your time!
Comment by Peter on 2009-10-17 01:43:16 +0300
@Sabelli – Haven’t used nextgen widget and doubt it there is another shadowbox clone that will do the trick. Sorry
@Tim – This is a PHP error, your are not including the js properly.
Comment by Sabelli on 2009-10-17 19:33:43 +0300
Peter, Thanks for the quick response!! I figured it out. I’m not a developer so there is most likely a better way but at least it’s working. I posted my solution here:
http://wordpress.org/support/topic/321736?replies=1#post-1248724
Thanks again!
Comment by Bhupendra on 2009-10-21 14:32:31 +0300
I can see the thumbnail image but when I click on it, instead of showing up the video, it enlarges the photo. I did copied the above javascript on my page and jquery is also there. Video url and Video description has been entered as suggested
Please help
Comment by Tim MacKenzie on 2009-10-28 06:53:34 +0300
Hi Peter:
I solved the PHP error by adding a function to register jQuery. I can get test scripts to work OK within the context of my page. However, your jQuery script does not result in any property changes to the elements. ‘href’ remains pointed to the img ‘jpg’ instead of the ‘flv’ file in the ‘alt/title’ field. ‘rel’ is also not changed to the video player. It seems that the reference to ‘video’ in the description field is not found in the execution of the script.
Is it possible for you to look at the source of my page at http://www.davidthompsonnow.com/?page_id=465 . I am at a loss after a week of trying to be able to debug this problem.
Thanks very much.
… TimMacKenzie
Comment by RickHope on 2009-10-29 01:46:09 +0300
Hey,
Firstly brilliant info.
Just in IE, all works fine, but firefox the thumb opens and the video you can see here… http://test.p2monline.co.uk/videos/
just looks messy and hard to cose the overlay.
Rick
Comment by Peter on 2009-10-29 12:46:56 +0300
@Tim – $(“ngg-gallery-thumbnail a”) you have deleted the “.” before ngg-gallery-thumbnail
@RickHope – works fine under my firefox
Comment by Tim MacKenzie on 2009-11-10 19:34:32 +0300
Hi Peter:
Thanks for pointing out my error – this got videos playing in both content and the sidebar widget using different classes in the jQuery calling script. However, the behaviour in IE7 is random – sometimes plays videos, sometimes just images. In all other browsers, the videos don’t play ever – jQuery script is not converting at all. Is there something wrong with the way I am initializing jQuery? I use the following code in functions.php:
function rsg_init() {
if (!is_admin()) {
wp_enqueue_script(‘jquery’);
}
}
add_action(‘init’, ‘rsg_init’);
The website is: http://www.davidthompsonnow.com
Thank you for helping.
… Tim
Comment by sanreto on 2009-11-11 23:57:26 +0300
Hello,
first of all, I like the idea of using nextgen for managing videos.
But it doesn’t work on my site (currently not online).
I have the same problem as Bhupendra. If I click the thumbnail –> there is no video!!!
Do you know anything to try?
Thanks!!!
Comment by TR on 2009-11-13 11:16:17 +0300
Hey, awesome info. I have some friends in the tv/video biz that would love to have this capability on their sites. I’ve been messing with some video themes, but this would be the easiest way for them to do it themselves.
Does anyone have a walk-through of how to do this to play self-hosted videos through this method? I saw some mention of Wordtube, JW player or flowplayer? All the videos I have are in .mov or mp4, so could anyone give me some advice as to how to make it all work?
Ex.
- Install Nextgen, Shadowbox, jquery;
- Copy Code to template (header, footer?, etc…)
- Install JW Player (or flowplayer?)
- Convert movies to .flv (?) and put into a designated folder
- Upload pic and use the VIDEO tag in the description
- DONE!
I don’t know if that’s how you’d do it, but if someone could correct/add the right info, that would be awesome and probably help out everyone that get’s to this post!! Thanks in advance!
Comment by Igor on 2010-01-11 16:29:25 +0300
Hi there, this solution seems awesome to me! Great work!
Unfortunately, Im also having the same problem as in several previous posts. As I’m not a developer, I know that this doesn’t work for me because I don’t know how to do the first step, where you say:
- Include this Javascript somewhere on your page
Could you please give me a specific example where I should be putting the Javascript code in a plain WordPress installation?
Any help will be greatly appreciated!
Thanks!
Igor
Comment by Peter on 2010-01-15 01:17:44 +0300
@Igor – “somewhere” , doesn’t really matter since it uses the ready function. Best way imho is to put it in external js file (with your other functions) and include it in the header. If you don’t have other functions put it directly in the HTML.
Comment by David Fuchs on 2010-01-18 21:45:15 +0300
This script works great on my site, except the video is not included as part of the group of other images/videos in the shadowbox gallery. I figured out the problem…shadowbox automatically adds ‘shadowbox[post-1432]’ instead of just ‘shadowbox’. So when the script runs and replaces the rel tag, the [post-1432] part is removed. How do I include that back in? (I need to get the post ID# for the wordpress post and don’t know how to do it in jquery. Here is what I tried but it doesn’t work
jQuery(document).ready(function($){
$(“.ngg-gallery-thumbnail a”).each(function (arr){
if ($(this).attr(“title”).substr(0,5)==”Video”){
global $wp_query;
$thePostID = $wp_query->post->ID;
$(this).attr(“rel”,”shadowbox[post-‘ .$thePostID . ‘];width=512;height=368″);
$(this).attr(“href”,$(this).children(“img”).attr(“title”));
}
})
});
I have tried the variables inside and outside the script…what is the proper syntax to make this work? Or alternativly, if I could strip/and or save the exisiting rel tag with the ID but without the ;viewer=img element that shadowbox put in there when it was just an image it would work as well.
Comment by David Fuchs on 2010-01-18 21:48:08 +0300
existing rel tag:
rel=shadowbox[post-1432];viewer=img
what I need:
rel=shadowbox[post-1432];width=512;height=368
how do I strip the second element of the tag and then add the width and height elements? That way I don’t have to find the post ID at all, just save it.
Comment by Peter on 2010-01-19 01:43:23 +0300
@David – Contact me on skype
Comment by David Fuchs on 2010-01-22 22:42:04 +0300
This below does what I need it to do until my post are greater than 10,000, Then I will have to modify the substr call to return everything up to the ; in stead of the 1st 20 characters. (rel=shadowbox[post-1432];viewer=img)
anyone know how to find the character position in a string?
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,20);
$(this).attr(“rel”, thereltag + “;width=512;height=348”);
$(this).attr(“href”,$(this).children(“img”).attr(“title”));
}
})
});
Comment by Igor on 2010-01-23 00:34:10 +0300
I got it to work! This was a real struggle to me, as I’m a total nitwit to programming/scripting. Here is what I did:
I’m using a theme which uses jQuery and has some java-script to it. The java-script files are in a directory called ‘/js’. I copied the text from the script box above in my notepad and saved it with file name ‘videogallerywithnextgengallery.js’ in the directory ‘/js’ on my server.
From my theme, I opened the file ‘header.php’. This file contains the lines:
[code]<script src="/js/jquery.js” type=”text/javascript”>