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 😉