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:

  1. I was already using Shadowbox which allows displaying videos
  2. I already had jQuery enabled in my WordPress Theme
  3. 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:

  1. Include this Javascript somewhere on your page
  2. Put the url for your video in the alt textfield
  3. Start your descriptions with “Video”

If you found this script useful consider donating. Hosting isn’t free you know. Thanks!

98 Replies to “WordPress Video Galleries with NextGen and jQuery”

  1. 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

  2. @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

  3. @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.

  4. @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.

  5. 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?

  6. 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?)

  7. 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.

  8. @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.

  9. 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.

  10. 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?

  11. 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….

  12. 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!

  13. 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:

  14. 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!

  15. @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.

  16. 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

  17. @Tim – $(“ngg-gallery-thumbnail a”) you have deleted the “.” before ngg-gallery-thumbnail
    @RickHope – works fine under my firefox

  18. 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

  19. 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!!!

  20. 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!

  21. 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

  22. @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.

  23. 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.

  24. 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.

  25. 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”));
    }
    })
    });

  26. 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

  27. 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.

  28. 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.

  29. 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 :)

  30. 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?

  31. 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

  32. 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.

Comments are closed.