To use colorbox lightbox for native wordpress gallery

I was gutted that changes in the Gallery plugin that I was using (Envira Gallery Light) were such that it was rendered incompatible with my theme templates – I had been using the in page / in post gallery builder element to dynamically use the uploaded gallery images as featured images and also to call the gallery automatically.

Such that it wasn’t possible anymore and all I really wanted was to use a pop up lightbox to show the images I thought that I’d make it part of the theme – then I can migrate it to other sites where I will have similar problems when upgrading. It’s a bit annoying but I’ll implement it on the site I have to launch and then roll it out on other sites as I implement the upgrade. It turned out to be way complicated – so I am keeping a record of the changes here so that I don’t have a nightmare remembering what to do.

This is a combination of information from http://www.sitepoint.com/adding-a-stylish-lightbox-effect-to-the-wordpress-gallery/ and http://code.tutsplus.com/articles/quick-tip-integrating-colorbox-into-the-native-gallery-shortcode–wp-25658 They go into more detail – I just wanted to pull out the main bits in a much less explanatory way.

Stage 1 – download colorbox from github

Stage 2 – unzip it add a line of code to the end of colorbox.min.js

jQuery(document).ready(function($) {
    $(".gallery-icon a").colorbox({rel:"gallery"});
});

Stage 3 – create a directory called “colorbox” in your theme folder

Stage 4 – look at the examples in the colorbox download and choose the one that you like the appearance of.

Stage 5 – upload the following to your new “colorbox” directory

colorbox.min.js
colorbox.css (from your chosen example)
and the image directory (from your chosen example)

Stage 6 – create a directory called “js” in your theme folder.

Stage 7 – create a file called main.js and add the following code.

(function($) {
   // Make ColorBox responsive
	jQuery.colorbox.settings.maxWidth  = '95%';
	jQuery.colorbox.settings.maxHeight = '95%';

	// ColorBox resize function
	var resizeTimer;
	function resizeColorBox()
	{
		if (resizeTimer) clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function() {
				if (jQuery('#cboxOverlay').is(':visible')) {
						jQuery.colorbox.load(true);
				}
		}, 300);
	}

	// Resize ColorBox when resizing window or changing mobile device orientation
	jQuery(window).resize(resizeColorBox);
	window.addEventListener("orientationchange", resizeColorBox, false);     
        selector.colorbox();
        //Settings for lightbox
        
        
    var cbSettings = {
      rel: 'cboxElement',
      width: '95%',
      height: 'auto',
      maxWidth: '95%',
      maxHeight: 'auto',
      title: function() {
        return $(this).find('img').attr('alt');
      }
    }
       
        
    })(jQuery);

There’s lots of other settings that power users can mess with – see www.jacklmoore.com/colorbox/

Stage 8 – now put the new file that you have created – main.js into your new “js” directory.

Stage 9 – you need to edit your themes functions.php add this code:

function themeslug_enqueue_styles_scripts() {
     
       //Colorbox stylesheet
       wp_enqueue_style( 'colorbox', get_template_directory_uri() . 
       '/colorbox/colorbox.css' );
     
      //Your theme CSS
      wp_enqueue_style( 'themeslug-style', get_stylesheet_uri() );
      
      //Colorbox jQuery plugin js file
      wp_enqueue_script( 'colorbox', get_template_directory_uri() . 
      '/colorbox/jquery.colorbox-min.js', array( 'jquery'   ), '', true );
      
      //Add main.js file
      wp_enqueue_script( 'themeslug-script', get_template_directory_uri() . 
      '/js/main.js', array( 'colorbox' ), '', true );
      
    }
       
    //Hook the function above
    add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_styles_scripts' );

Stage 10 – Create a native WordPress Gallery with the add media button, setting the link to “media” and……. – ta da – you have a light box!

BUT I HAD A PROBLEM – the colorbox was not responsive to different devices so I had to work in some code from github that has been added to the main.js content shown above https://github.com/jackmoore/colorbox/issues/158

THEN I HAD ANOTHER PROBLEM – the image titles weren’t displaying on the lightbox (apparently something changed at 3.7 which effected the title output) but I found a solution and added in some code from the wordress forum https://wordpress.org/support/topic/colorbox-doesnt-display-titles which had to be added to the functions file.

function my_get_attachment_link_filter( $content,$id ) {
        $title = get_the_title($id);
        $new_content = str_replace('<a ', '<a title="' . esc_attr($title) . '" ', $content);
        return $new_content;
}
add_filter('wp_get_attachment_link', 'my_get_attachment_link_filter', 10, 4);

And that is end of the problems I hope 😉