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