Add a Lightbox (galleries)

Download LightBox2: lightbox v 2.6

Copy it’s files to /wordpress/lightbox.

In functions.php:


function jbst_lightbox_css() {
wp_register_style( 'jbst_lightbox_css', home_url() . '/lightbox/css/lightbox.css', array(), '20121005', 'all' );
wp_enqueue_style( 'jbst_lightbox_css' );
add_action( 'wp_enqueue_styles', 'jbst_lightbox_css', 99 );
}

function jbst_lightbox_js() {
wp_register_script( 'jbst_lightbox_js', home_url() . '/library/lightbox/js/lightbox-2.6.min.js', array( 'jquery','jbst_js' ), '20131101', true );
wp_enqueue_script( 'jbst_lightbox_js' );
add_action( 'wp_enqueue_scripts', 'jbst_lightbox_js' );
}


/* Galleries */
// set default link attribute to "file", see: http://sumobi.com/how-to-filter-shortcodes-in-wordpress-3-6/

function jbst_gallery_atts( $out, $pairs, $atts ) {
$out['link'] = 'file';
return $out;
}
add_filter( 'shortcode_atts_gallery', 'jbst_gallery_atts', 10, 3 );

Aditional Javascript for WP Commerce:


/* Add lightbox to preview images */
$('a.preview_link').attr('rel', 'lightbox');
$('.default_product_display a.preview_link').attr('rel', 'lightbox');


NB insert on document ready, see also: WordPress Development: Properly load your Javascript and set dependency

Posted in: Appearance