jQuery Greyscale Filter

You can filter images by means of the pixastic Javascript filter. This can be used to desaturate images – making them greyscale.

Build a custom pixastic package here:

http://www.pixastic.com/lib/download/

Select “jQuery plugin”.

To build the filter in a Thesis skin, save the generated file as THESIS_USER_SKIN_URL . ‘/js/pixastic.custom.js

add_action( 'wp_enqueue_scripts', 'carawebs_bw_javascript' );
 
function carawebs_bw_javascript() {
	
	if ( is_category('13') || is_singular ('people')) { // Conditional - is it the archive page for "people" category or is it a "person" CPT
	
		// Register pixastic.custom.js and a control script in footer
		wp_register_script( 'bw_scripts', THESIS_USER_SKIN_URL . '/js/pixastic.custom.js', array( 'jquery' ), '1.0', true);
		wp_register_script( 'bw_control', THESIS_USER_SKIN_URL . '/js/bw_control.js', array( 'jquery' ), '1.0', true);
		
		// Enqueue the scripts
		wp_enqueue_script('bw_scripts');
		wp_enqueue_script('bw_control');
		
	}
	
}

The following code goes in a js file in folder js in current thesis skin.

jQuery(window).load(function(){
		// convert all images with class=".quarter_box .wp-post-image" to greyscale
		jQuery(".quarter_box .wp-post-image").pixastic("desaturate");		
		
	});
	
	
jQuery('.js').removeClass('js');

Add the following javascript and CSS to the head to prevent FOUC. This can be achieved by enqueuing a custom function, or using the Thesis HTML editor for the required page template. Add an ID of “flash” to the element that needs to be hidden.

if user doesn’t have JS enabled, no problem – the .js class won’t be present, they get a FOUC but at least the content will be shown. The js class is added to the html element, and removed by the control script when desaturation is complete.

Get the code as a gist.