NextGen Gallery and Easy FancyBox

NextGEN has its own built in FancyBox version along with a choice of other light box scripts but if you prefer to use Easy FancyBox then you need to take some steps to make the two plugins compatible.

1. Go to your Settings > Media admin page and switch OFF the FancyBox “Auto-gallery” option in the Images section;
2. Go to Gallery > Other Options and set the Lightbox Effects option to “Custom” and click on Show Advanced Settings;
3. fill the Code field with
   class="fancybox" rel="%GALLERY_NAME%"
4. Leave the other fields empty and save your settings.

Easy FancyBox should now work on your NextGen gallery images.

Read on if you wish to have one thumbnail image to open a complete slideshow or to open a Youtube video in a light box…

One thumbnail to open a complete gallery slideshow

You can choose between two shortcodes to show a gallery that (1) limits images per gallery using the shortcode [nggallery id=x] or (2) per tag name (across galleries; you need to set tag name manually => more work but more control) using the shortcode [nggtags gallery=YourTagName,AnotherTagName].

General steps:

A. Place the shortcode of your choice in your page/post content.

B. Configure NextGen on Gallery > Gallery Settings to Display galleries as “NextGEN Basic Thumbnails” and then under the NextGEN Basic Thumbnails to at least have the following options set like this:

1. Number of images per page: 1
2. Use imagebrowser effect: No
3. Add hidden images: Yes

C. Optional: add the following new CSS rule to your theme stylesheet or in Appearance > Custom CSS to hide the page browsing links below the gallery thumbnail:
.ngg-navigation { display:none; }

Link a NextGEN thumbnail to a Youtube movie

User Mark Szoldan shared a neat trick how to do this:

1. Follow the instructions to make Easy FancyBox work smoothly with NextGEN above and make sure it all works correctly for normal thumbnails linked to their full-size version.
2. Then give the image that you want to link to a Youtube movie the URL to the Youtube page as title.
3. Finally paste the code below into a Custom HTML widget that will live in your sidebar or footer bar, or you can hard-code it into your theme but make sure it come before the wp_footer() call…

<script type="text/javascript">
jQuery('.fancybox [title*="www.youtube.com"]').each(function() {
    var title = jQuery(this).attr('title'),
        desc = jQuery(this).parent().attr('title');
    jQuery(this).attr('title', desc);
    jQuery(this).parent().attr('href', title);
});
</script>

This script snippet will scan the image titles and if it finds a Youtube URL there, it will replace the links href attribute value accordingly.