Slick page transition implemented

I was just looking through photos I made in Dublin so far, when I discovered a shot of Keel Beach, Achill Island which I had transformed to black and white. I thought it would fit quite good to my WordPress blog as it is mainly black and white, too.

The idea was to fade out to the photo of Keel Beach during site transitions. All it took was a bit of PHP and JavaScript/jQuery.

The Javascript is very simple:

(function ($) {
$(document).ready(function () {
$("body").fadeIn(1000);

$(""a:not(:has(img))[class!='noslick']"").click(function (event) {
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});

function redirectPage() {
window.location = linkLocation;
}
});
})(jQuery);

You can’t access the $ directly as jQuery is operating in no-conflict mode. Another thing is to exclude image link which should be opened in a Lightbox. jQuery provides the selectors to implement this task easily. Furthermore I added an option not to make slick transitions when the class-Attribute of the Link is set to noslick like this.

The PHP part isn’t complicated either. You need to make a WordPress API call in header.php like this:

function my_scripts_method() {
	wp_enqueue_script(
		'custom-script',
		get_template_directory_uri() . '/js/slicktrans.js',
		array( 'jquery' )
	);
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
wp_head();

The important thing is the you add query script file before wp_head(). Using the function wp_enqueue_script with the parameters above, you can make sure that jQuery is loaded before. This is necessary because the transition script depends on it.

At last here is the original picture.