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!

Be Sociable, Share!

Tags: , ,

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

  1. Filip Says:

    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

  2. Toby Says:

    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/

  3. Toby Says:

    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!

  4. Bding Says:

    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

  5. Ramona Says:

    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.

  6. Ramona Says:

    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.

  7. jai Says:

    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…

  8. shag Says:

    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.

  9. Justin Tyler Moore Says:

    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!

  10. Mick Dinulos Says:

    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!

  11. Damian Says:

    Добрый день. Установил себе плагин NextGen Gallery на сайт. Но не на главную, а на внутреннюю. То есть сам сайт (основной) лежит в корне, а другой сайт, сделанный на WP лежит в папке. И получается, что галерея находится по адресу http://fundate.ru/pictures/. Но он вообще не индексируется. Почему это может быть? Очень нужно. Спасибо заранее.

  12. neel Says:

    Thanks Peter!! Works awesome. Excellent information to add videos using he nextgen wordpress plugin. thanks for awesome work,

  13. Giacomo Says:

    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

  14. jamie Says:

    Thanks for the scrip Peter, helped me get out of a fix with a site I’m working on.

  15. JPOpperman Says:

    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/

  16. Giacomo Says:

    @ JPOpperman

    I saw your gallery, it works in FF but in my IE the script shows only the image, not the video 🙁

  17. JPOpperman Says:

    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

  18. JPOpperman Says:

    that is Giacomo 🙂

  19. Giacomo Says:

    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)

  20. Max Lopez Says:

    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 …

  21. JPOpperman Says:

    Just found out that this hack also seems to work with FancyBox!

  22. manu Says:

    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 😉

  23. gotoddrun Says:

    I use this too and it stopped working for me as well. The thumbnails load initially then disappear. Does anyone have a fix? Please?

  24. Peter Says:

    @gotoddrun great photography work;

    might look at the issue, but have other things on my todo at the moment

  25. gotoddrun Says:

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

  26. gotoddrun Says:

    Has anyone tried this? http://wordpress.org/extend/plugins/ngg-video-extend/

  27. Peter Says:

    As marked in the changelog it is based on this blog post

  28. Massimiliano Derviso Says:

    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

  29. Zach Says:

    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!

  30. Rebecka Says:

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

  31. Rebecka Says:

    Hello again!

    I have already found a solution to my problem http://wordpress.org/extend/plugins/ngg-video-extend/

  32. Josue Says:

    Hey, made this portfolio for a friend. Some others wanted it so i made this download with instructions. Thought i share with u too. 🙂

  33. Josue Says:

    Sorry forgot the link here it is:

    http://www.josuemotta.com/SS_VideoPortfolio/

    🙂

  34. stephanie Says:

    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

  35. stephanie Says:

    ok, now i put it in a “nextgen-vido.js” which i put in js folder …but, hm…?

  36. Jamie Batchelor Says:

    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

  37. Sigmond Says:

    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!

  38. chandan Says:

    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 🙂

  39. hotdisplay.net Says:

    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

  40. Thad Says:

    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!

  41. Thad Says:

    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!

  42. pao Says:

    is possible to make a gallery with swf files (flash) instead of videos?
    very thanks…

  43. makarand Says:

    I am fancybox in my website so please tell how to use this for fancybox

    means what changes i have to make

  44. Miranda Says:

    Hi Peter,

    I’ve followed all the instructions above. However, the video is not showing up in the lightbox for several seconds and then suddenly the web site url changes to the video url and the user leaves the site. I’m wondering if you might know what the issue of this might be? Thanks! Miranda:)

  45. Derek Lapp Says:

    just an FYI, this logic can be applied via php to provide a js-disabled option.

    the jquery method is nice and easy, and doesn’t require any workwhen upgrading the plugin, but unfortunately it’s useless in the event js is disabled. in your view.php file, you can apply the exact same if conditions against $image->description and serve either your standard image tag, or whatever modifications you want in the event it’s flagged as a video.

  46. anu Says:

    plz sugest a vedeo gallery plugin with vedeo on top position nad thumnail bottom listed in horizontally

  47. Ash Says:

    seems doesn’t work. any update available?

  48. Rab Says:

    Works great on PC, but not on my iPad :E

Leave a Reply