WordPress Video Galleries with NextGen and jQuery
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!
Tags: JavaScript, jquery, wordpress
April 9th, 2009 at 10:32 pm
Worked like a charm! That was a great help thank you for sharing!
Kudos,
Jul
August 15th, 2009 at 6:06 am
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
August 15th, 2009 at 5:02 pm
Could you please post more information or e-mail me please ?
August 15th, 2009 at 9:39 pm
@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
August 16th, 2009 at 12:19 am
@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.
August 16th, 2009 at 12:39 am
@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.
September 4th, 2009 at 12:01 am
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?
September 4th, 2009 at 10:14 am
@Matt – Have you started your description with ‘Video’? Send me a link on my mail and I’ll check it out.
September 5th, 2009 at 1:35 pm
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?)
September 5th, 2009 at 9:50 pm
@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
September 6th, 2009 at 12:48 am
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 <a> 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.
September 7th, 2009 at 11:24 am
@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.
September 10th, 2009 at 2:56 am
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.
September 10th, 2009 at 1:09 pm
contact me on my skype peterv-at-work
September 14th, 2009 at 8:09 pm
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?
September 22nd, 2009 at 1:59 am
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….
September 22nd, 2009 at 11:41 pm
@Matt – Yeah we got that working with Eric. Just install JW player in the correct location
September 23rd, 2009 at 10:33 pm
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!
September 25th, 2009 at 2:00 pm
@Matt – sorry mate I’ve been quite bussy recently, contact me on my skype
September 28th, 2009 at 6:34 pm
Great tutorial, i couldn’t find any other to put some videos with nextgen gallery. Can this be adapted to use the lightbox effect?
September 29th, 2009 at 12:16 am
@Xavi – which exactly? Check it how it will look here http://www.shadowbox-js.com/
October 9th, 2009 at 9:41 pm
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.
October 15th, 2009 at 8:30 pm
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:
October 16th, 2009 at 4:50 pm
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!
October 17th, 2009 at 1:43 am
@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.
October 17th, 2009 at 7:33 pm
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!
October 21st, 2009 at 2:32 pm
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
http://test.bhupendra.info/
Please help
October 28th, 2009 at 6:53 am
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 <a> 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
October 29th, 2009 at 1:46 am
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
October 29th, 2009 at 12:46 pm
@Tim – $(“ngg-gallery-thumbnail a”) you have deleted the “.” before ngg-gallery-thumbnail
@RickHope – works fine under my firefox
November 10th, 2009 at 7:34 pm
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
November 11th, 2009 at 11:57 pm
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!!!
November 13th, 2009 at 11:16 am
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.
1. Install Nextgen, Shadowbox, jquery;
2. Copy Code to template (header, footer?, etc…)
3. Install JW Player (or flowplayer?)
4. Convert movies to .flv (?) and put into a designated folder
5. Upload pic and use the VIDEO tag in the description
6. 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!
January 11th, 2010 at 4:29 pm
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:
1. Include this Javascript somewhere on your page
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"));
}
})
});
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 greately appreciated!
Thanks!
Igor
January 15th, 2010 at 1:17 am
@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.
January 18th, 2010 at 9:45 pm
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.
January 18th, 2010 at 9:48 pm
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.
January 19th, 2010 at 1:43 am
@David – Contact me on skype
January 22nd, 2010 at 10:42 pm
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”));
}
})
});
January 23rd, 2010 at 12:34 am
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">
<script src="/js/jquery.innerfade.js" type="text/javascript">
<script src="/js/imgpreview.js" type="text/javascript">[/code]
I have added the line:
[code]<script src="/js/videogallerywithnextgengallery.js" type="text/javascript">[/code]
Saved the file and uploaded to my themes directory.
Now when I add alt-text field with the link to my youtube movie and using the word ‘video’ in the description field, the movie opens when clicking the image which is displayed in my post!
Hope this helps others with the same struggle!
Awesome! Cheers!
Igor
February 11th, 2010 at 10:57 pm
Hey everyone, this worked right out of the gate for me. However, it’s loading 2 lightbox layers each time I click on a thumbnail. The fist layer contains the enlarged image, and the second one overlaps it and contains the video. Even the transparent layers overlap which doubles the darkness of the transparent overlay. Both layers are functioning perfectly, but obviously I only want the video layer. As it is, I have to click outside of the lightbox once to remove the video layer, and again to remove the image.
Once I find a solution I will post it here.
February 11th, 2010 at 11:20 pm
Well that was fast. I changed the effect to Lightbox and the image layer no longer loads, just the video. Nice!
February 24th, 2010 at 4:24 am
I’ve followed this process to the letter – I’m an intermediate WP website designer so I understand the path statements, etc.
When the script is called when clicking on the image, the page just goes dark without loading the video – I’ve read through the full thread, trying everything suggested and I still can’t get the script to open a video being called from YouTube correctly – you can see what I’m talking about here: http://projectsynchresis.com/portfolio – select the only thumbnail and you’ll see what I’m talking about. I have set the path statement in the header file as follows: [code]<script type="text/javascript" src="/js/nggvideo.js">[/code] where nggvideo.js is the name of the external js file being called.
Any input as to why it’s not working would be greatly appreciated.
Thanks for providing a solution to this issue since I work extensively as a solo video journalist in addition to developing other multimedia content websites.
February 27th, 2010 at 12:03 am
Thank you very much for this approach, it really helped me out, I needed to set up a video gallery which could be easily managed by non-tech users, and this did the trick.
My two cents: if you want to avoid showing the video URL in the tooltip, you can store it in a custom field (http://wordpress.org/extend/plugins/nextgen-gallery-custom-fields/) and then create a personalized NextGEN Gallery template (http://nextgen-gallery.com/templates/) to show data the way you want. Here (http://www.kimwoodbridge.com/how-to-link-nextgen-gallery-images-to-an-individual-page-or-post-in-wordpress/) is a different approach, used to link gallery images to pages.
By the way, in case anyone needs it, Shadowbox JS (http://wordpress.org/extend/plugins/shadowbox-js/) is a WordPress plugin which will allow you to configure all SB options through the backend panel. In order to use it in your theme, you have to be sure that your header and footer are loading the wp_head() and wp_footer() functions.
Hope this helps someone
February 28th, 2010 at 11:51 pm
I finally got it to work nicely with a few modifications. All the videos play inline with the photos now in the shadowbox.
http://www.smilecouple.org/2010/02/12/video-and-photos-in-one-gallery-wordpress-nextgen-and-jquery
March 2nd, 2010 at 9:47 pm
This will do exactly what I want, if I can only get it working. I’m new to jquery, not new to javascript or wordpress. I’m not a developer, but am somewhat tech savvy.
So far, I put the javascript code in footer.php. I uploaded two thumbnails, changed the ALT text to the youtube address of the video, and started each description with Video: . I wasn’t sure how to include jquery in my theme, so I copied the code above, where someone else showed how s/he did it.
When I mouse over the thumbnail, it looks like the link is to the youtube video, but the only thing I can get to pop is the thumbnail, in a larger box. When I click on the thumbnail, I get another box where it looks like the video should be, but it’s blank.
Can anyone see what I’m doing wrong?
March 2nd, 2010 at 9:49 pm
Sorry — I thought the website I entered would show. It’s http://whetstone.wesley.edu. The video gallery is in one of the tabs, behind the image gallery.
March 4th, 2010 at 7:08 am
I seem to be having the exact same problem as bluprojekt above. When I click the thumbnail, a text window opens in TextEdit (I’m on a Mac). The name on the window is the last part of the name of my youtube video. That window itself is full of gibberish — perhaps TextEdit is trying to open an image or a video. Also on the screen is a gray window containing the thumbnail I clicked on. If I click on the thumbnail in the gray window, a black window opens, but nothing happens.
If I find the solution, I’ll post it here. Meantime, anyone have any thoughts as to what’s wrong here?
TIA,
Tery
March 5th, 2010 at 6:43 pm
Partial solution: I put the javascript in its own .js file and put that in the theme’s include/js folder. I pointed to the js file in the php file where the other javascript files are loaded. I get different effects in different browsers (I’m on Mac OS X). Safari almost works — I get the double-image problem Mike had above, but clicking through that gets the video to play. Camino half works — I see the video box, but it won’t play. Firefox doesn’t work.
March 8th, 2010 at 6:53 pm
I’m giving up . . .
April 2nd, 2010 at 2:25 am
Thanks, everything works well! BUT, I wanted to get rid of the link display over the image. According to Rick’s idea I installed NGG Custom fields, I added image custom text input called “adresa” where I inserted my video link instead into “Alt & Title Text / Description” NOW, I am absolutely new in javascripting, could anybody tell, what should I update in the original script to get the video displayed?
thanks, filip
April 14th, 2010 at 11:19 am
I’ve added all the plugins and code to the site, but when I click on a video, the shadowbox screen just appears as an iframe to youtube. Granted, it shows the right video but I thought it would be more than just an iframe setup. Unless I’ve done something wrong? Here’s the link to my video page: http://www.coastwiththemost.com/gallery/videos/
April 21st, 2010 at 1:43 pm
Ok, I fixed it. I noticed that the Alt & Title text example above, the YouTube url was formatted differently, I had to remove the “/watch?v=” bit and replace it with “/v/” and now it works – supersmashinggreat!
May 15th, 2010 at 12:51 am
Hello,
How to exchange: $(this).attr(“rel”,”shadowbox;width=405;height=340″);
to auto resize, depends of medium size.
Any option to rename “Video” or hide it?
Thank you. Great script!
Bding
June 1st, 2010 at 2:12 pm
Hi,
I think I’ve followed your simple instructions, and I’ve gotten fairly far. However, when I click on my thumbnail, the only thing that is displayed is the thumbnail, not the video as expected. Here is a link: http://howtomakeadesignerhandbag.com/testing/a-video-test/
I am using thesis theme. I have enabled jquery library on the page, as this is an option in thesis. I entered your code in the “Embed Your Own JavaScript” option on that particular page. Maybe I should be doing this in the site wide options?
I desparately hope this can work, as I’ve spent the better part of the holiday weekend looking for a solution to display video in wordpress. Yours is the only thing I’ve found that even looks like a viable option.
June 1st, 2010 at 2:19 pm
Sorry for the double post, but I forgot something. You say “The hack uses flv players, it can not play directly video. Put url to youtube. ” My link above is from my youtube channel, but I would like to be able to upload the video to my media library and put that url path. I say this because I found this post: http://www.smilecouple.org/2010/02/12/video-and-photos-in-one-gallery-wordpress-nextgen-and-jquery
which is building on your solution. He states: “Upload your video(s) to your normal WordPress gallery and copy the URL(s)”… Putting that url in the alt/description text field. This would be my preference, but I backed away from his solution and am trying to get yours to work first. Thanks in advance.
June 2nd, 2010 at 5:31 am
thanks for nice plugin,
plugin installed and everything ok until i put recent video galleries in front page with nggDisplayRandomImages shortcode.
when clicked the thumbnail it’s only image showup not video from video galleries…
anyone have solution for this..?
thank before for any solution…
June 2nd, 2010 at 6:01 am
What a brilliant idea! so simple and effective. I had some trouble with images still showing rather than the video but that was due to other javascript errors on the page that IE didn’t like. Also I resolved the issue of the video AND image popping up by setting the nextGen effects to custom: rel=”shadowbox” rather than the default which launched two different viewers.
Thanks for the knowledge.
June 7th, 2010 at 1:44 am
Hello Peter,
GREAT info!!! I’ve been looking for a way to do this for a while now.
I have followed the instructions to the t, and still can’t get it working. I am using fancybox, not shadowbox, and have edited the js to reflect this. However, when I load the page, and look at the source, it’s not replacing any of the variables. It’s displaying the link below the image…. any thoughts? Feel free to email me!
July 27th, 2010 at 9:43 am
Thank for this very nice script Peter.
But is there anyway to implement your script to directly play FLV videos that are hosted in our site.
Cheers!
July 29th, 2010 at 4:07 pm
Добрый день. Установил себе плагин NextGen Gallery на сайт. Но не на главную, а на внутреннюю. То есть сам сайт (основной) лежит в корне, а другой сайт, сделанный на WP лежит в папке. И получается, что галерея находится по адресу http://fundate.ru/pictures/. Но он вообще не индексируется. Почему это может быть? Очень нужно. Спасибо заранее.
August 18th, 2010 at 12:19 pm
Thanks Peter!! Works awesome. Excellent information to add videos using he nextgen wordpress plugin. thanks for awesome work,
September 27th, 2010 at 4:31 pm
Hi Peter! thank you for your script, it’s what I was looking for
I have only a problem with IE: sometimes it works and sometimes doesn’t (the thumb opens the enlarged image and not the video). If I refresh the page (once or a couple of times), then the script works! I have no problems with firefox. Do you know how could I fix it?
You can find an example in my website: http://www.friulincanyon.it/?page_id=50&album=1&gallery=23
Thank you,
Giacomo
October 11th, 2010 at 11:25 pm
Thanks for the scrip Peter, helped me get out of a fix with a site I’m working on.
October 19th, 2010 at 4:33 pm
Thanks a lot, works perfectly, also used a custom field to remove the annoying Video title etc. keep up the good work!
http://jpopperman.com/bla/videos2/
October 26th, 2010 at 1:18 am
@ JPOpperman
I saw your gallery, it works in FF but in my IE the script shows only the image, not the video
October 27th, 2010 at 6:59 pm
Hello Giacoma
Tested and it works in
IE 6 – loads but asks to save the swf?
IE 7 – works
IE 8 – works
FF – works
Chrome – Works
but when it comes to IE I discovered something weird,
on the video page the videos are playing but as soon as I
add a gallery to a Album the video shows the thumbnail or only the shadowbox.
When I open a swf file it shows an untitled image instead in IE but works in FF and chrome.
example: http://jpopperman.com/bla/groupies/?album=2&gallery=10
October 27th, 2010 at 7:00 pm
that is Giacomo
October 30th, 2010 at 3:07 pm
Thx for your feedback, JPOpperman!
I tried again and now it worked fine even in IE… I have no idea what the matter was! It was weird because normally I needed to refresh the page to make it work!
(It works with Opera)
November 11th, 2010 at 8:47 pm
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
<script src="/js/vgnggmeknyc.js” type=”text/javascript”>
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 …
December 23rd, 2010 at 12:35 am
Just found out that this hack also seems to work with FancyBox!
February 24th, 2011 at 10:15 pm
Hello,
thanks for your code I use this on many projects but with the new WordPress that doesn’t work. Someone have this problem too ?
Hack for fix thit please ?
Thanks
March 9th, 2011 at 9:55 am
I use this too and it stopped working for me as well. The thumbnails load initially then disappear. Does anyone have a fix? Please?
March 9th, 2011 at 3:21 pm
@gotoddrun great photography work;
might look at the issue, but have other things on my todo at the moment
March 10th, 2011 at 12:20 pm
@Peter Thanks so much! I have a friend looking into it as well. If they can find a fix, I’ll be sure to post it here. I cannot fathom why it is not an included feature in the gallery out of the box.
March 18th, 2011 at 12:16 am
Has anyone tried this? http://wordpress.org/extend/plugins/ngg-video-extend/
March 18th, 2011 at 12:52 am
As marked in the changelog it is based on this blog post
March 30th, 2011 at 6:42 am
Hi i please someone to help me, i use iBlogPro template for wordpress and i have NextGen Gallery and Shadowbox installed. I created the new album, uploaded the thumb for the video and then inserted the url of youtube movie that i want to show clicking on the thumb. I putted the jQuery on the header…..but nothing, it appears the pictures 2 times with one click and no movies. This is the link http://www.soldelsur.net/works
Please i am getting bad..
Thank you
April 21st, 2011 at 3:24 am
Hi,
I’ve gotten this to work to the point where I can click a thumbnail in a NextGen gallery and it will open a YouTube video on youtube.com, but won’t stay on my site and open in shadowbox. Any thoughts? The page I am working on is here:
http://www.ryanknipp.com/vid
Thanks for the code and any help!
May 7th, 2011 at 3:07 pm
Hello!
I want to include videos in my NextGEN Galleries and came here when I googled. Before I try me on this, I wonder exactly what this does?
What I want to do is to have videos among my images as thumbnails that you like images can click on to open in a new window (then you can press play and watch). Can I do so by your guide, or is it meant to be used in any other way?
An example of what I mean http://videolightbox.com/ (see DEMO).
May 7th, 2011 at 3:31 pm
Hello again!
I have already found a solution to my problem http://wordpress.org/extend/plugins/ngg-video-extend/
May 11th, 2011 at 10:44 am
Hey, made this portfolio for a friend. Some others wanted it so i made this download with instructions. Thought i share with u too.
May 11th, 2011 at 10:45 am
Sorry forgot the link here it is:
http://www.josuemotta.com/SS_VideoPortfolio/
July 25th, 2011 at 4:39 pm
hi, thanks for providing this rare solution!
anyway i’ve the same step 1 “somewhere” problem. when i put it in the header.php it shows up as text on my site…:(
then you say in .js, ok but how and where link to it???
thank you
July 25th, 2011 at 4:42 pm
ok, now i put it in a “nextgen-vido.js” which i put in js folder …but, hm…?
August 6th, 2011 at 12:29 am
Can someone help me out. I have read this and tried to implement the stepps with no luck. I simply want to build a gallery and have them linked to youtube videos of my animations. I have installed shadowbox.js and I even installed an extension for ng gallery to support videos and still not able to get what i need. Please feel free to email me and you can check out my site at http://www.cuttingedgegfx.com.
I am using a theme called prestige. It has several page templates so do I copy the jquery code into the gallery page template using the editor in wordpress? I am lost and I don’t want to screw my site up. I placed the code at the beginning of the gallery template since that is the template I am using for a page to display several of my different animation demo reels. Frustrated I have finally just embedded the video into the page but this is not what I am after. I want there to be a gallery (using next gen) that has three thumbs. One for my logo animation reel, one for my motion graphics reel and one for my promo animation reel. On clicking lightbox style window opens with video playing from youtube. I have seen this everywhere yet can’t seem to get this simple functionality out of the premium wordpress template i bought.
I placed the you tube url in the atl field and description was filled in with Video: My demo reel. and all it does when I click is pulls up the thumb in the lightbox with the text Video: demo reel displayed and no video. I followed everything to the best of my ability so if anyone can help me resolve this directly I would be eternally grateful. Please Help!!!
Thanks a million in advance!
JB
August 15th, 2011 at 2:25 pm
Is it possible to use Floatbox Plus plugin instead of Shadowbox to achieve this same result?? I’m not a programmer – but would appreciate any help!
August 18th, 2011 at 10:14 am
Hi..
I need a help from yours.. your trick to add video is excellent, but I need video and images in slide show of the plugin. so that it can directly navigate from slide show like images.
And can i use click able links to these images and videos like 1,2,3,4… @the bottom of the slideshow..
Can u help me out..
Thanks in advance
September 23rd, 2011 at 9:28 am
PLAY NEW IFRAME YOUTUBE VIDEO (IPAD TESTED)
jQuery(document).ready(function($){
$(“.ngg-gallery-thumbnail a”).each(function (arr){
if ($(this).attr(“title”).substr(0,5)==”Video”){
$(this).attr(“rel”,”shadowbox;width=560;height=315″);
$(this).attr(“href”,$(this).children(“img”).attr(“title”)+”?rel=0&autoplay=1″);
}
})
});
ALT:
http://www.youtube.com/embed/Kz5Nak3wqtY
TAG:
Video: Tiger Love
December 2nd, 2011 at 9:12 am
I am trying to use this method. I have the above Javascript before my tag, and the shadowbox is initiated, with a box, above titling the video name.
I have the youtube video link (http://youtu.be/-ZIJj_Avfuo) in the ALT/TITLE and the (Video: Joseph’s Lullaby) in the description
Problem: The video isnt loading. Ideas?
Thank you!
December 2nd, 2011 at 9:16 am
Nevermind.. all works fine. I was using the wrong YouTube video link. I tried the post above me on a hunch and it worked. Went back to my video and used the same type, and it worked. Awesome! Thanks for the method!
December 18th, 2011 at 2:08 am
is possible to make a gallery with swf files (flash) instead of videos?
very thanks…
January 9th, 2012 at 10:28 pm
I am fancybox in my website so please tell how to use this for fancybox
means what changes i have to make