September 16, 2013

NextGEN Gallery 2.0.21 Lightbox Fix

Filed under: Software Development

I decided to share my fix for lightboxing in NextGEN Gallery 2.0.21. This version of the WordPress plugin for some odd reason breaks support for lightboxing the gallery images (that is having the gallery image “pop out” in front of the page when clicked).

This fix does not modify the NextGEN gallery itself so we can easily revert to using NextGEN’s lightboxing whenever it gets fixed.

Follow these steps:

Log into the dashboard of your WordPress installation and navigate to `Gallery

Other Options and select Lightbox Effects. There select from the drop downNo lightbox`

It is important to have the most up-to-date version of Lightbox because of compatiblity issues with jQuery 1.10. Go to the Lightbox 2 website and download the latest version of lightbox, unzip the download and upload the resulting directory into your theme’s directory on your server (it should be in /wp-content/themes/).

3. Update `header.php` To Load Lightbox 2

Now from the WordPress dashboard select Appearance >> Editor >> header.php. For those of you without programming experience this might seem arcane but follow along. Between the <head> and </head> tags include the following lines of code:

<style type="text/css" media="screen">
        @import url( 
            '<?= get_theme_root_uri() ?>/THEME/lightbox/css/lightbox.css' 
        );
</style>
<script
  type="text/javascript"
  src="<?= get_theme_root_uri() ?>/THEME/lightbox/js/lightbox-2.6.min.js">
</script>

Where THEME is the name of your current WordPress theme.

There is two ways of going about this. First navigate this time to `Apperance » Editor » footer.php. We can either append the javascript directly to the end of this file, or (the better solution) you could create an external javascript file and load it.

To do the latter, you simply create a file named lightfix.js and paste the script below minus the <script> and </script> tags. Then include it in your file the same way that you included lightbox-2.6.min.js above only this time append the include to the end of the footer.php.

If you want to just put the script directly in footer.php just copy the text below directly into the file:

<script>
( function( $, images ) {
  $(img).each( function() {
    if( $(this).parent().is('a') {
      $(this).parent().attr('rel', 'lightbox');
    }
  }
})( jQuery, '.storycontent img');
</script>

You might need to modify .storycontent img to fit your own theme. This script selects all the img html elements in the div with a class name storycontent it then loops through each of these images and if they are contained inside an anchor tag then it transforms that image into a lightbox. Since each picture in the NextGEN gallery is wrapped in an anchor tag linking to the image source this should automatically work alongside Lightbox 2 to return the lightbox functionality to our gallery.

NextGEN Gallery 2.0.21 Lightbox Fix

1. Turn off NextGEN Lightbox Effect

2. Install Lightbox 2 v2.6

3. Update header.php To Load Lightbox 2

4. Add Custom Script to Your Footer

3. Update `header.php` To Load Lightbox 2