User Tools

Site Tools


blurry_full-screen_background_image

This is an old revision of the document!


Blurry, Full-screen Background-image

This function assigns a background-image to your page, stretches it to full-screen, then blurs it. The blur effect is achieved using the StackBlur algorithm, as implemented by listenrightmeow.

Copy-and-paste the script below into your phplugins.php file.


// IMPLEMENT STACKBLUR.JS TO BLUR PAGE BACKGROUND, USING THE "PAGE IMAGE" DEFINED IN LR AS BACKGROUND
function ttg_body_bottom( $style, $path ) { 
	if ( G_STYLE != 'CE3-MOBILE' ) {
	echo '
<script src="./phplugins/js/simple-js-inheritance.js" type="text/javascript"></script>
<script src="./phplugins/js/stackblur.min.js" type="text/javascript"></script>
<script type="text/javascript">
	var blur = new Blur({ 
		el : document.querySelector("body"), 
		path : "photos/' . PAGEIMAGE . '", 
		radius : 5, 
		fullscreen : true 
	});
</script>
	';
	}
} // END

Download the script dependencies here.

Unzip the files and copy to your server at /phplugins/js/. Should look like this:

The function above is written to that the effect will not be applied to the mobile gallery ( G_STYLE != 'CE3-MOBILE' ).

The background-image will load only after all page content has finished loading.

By default, the function uses PAGEIMAGE to determine the background-image. PAGEIMAGE is a constant set separately within each page or gallery, defined within Lightroom during the design process by setting the Image ID in the Color Palette > Content Area / 'The Block' settings.

To increase or decrease the blur effect, change the radius value.

Here's a second version of the script. Rather than removing the effect from “CE3-MOBILE” tagged gallery pages, it detects whether the page is being viewed on iPhone, iPad, Android or other mobile devices and kills the effect if the check returns positive, making this perhaps the more useful version of the script:


// IMPLEMENT STACKBLUR.JS TO BLUR PAGE BACKGROUND, USING THE "PAGE IMAGE" DEFINED IN LR AS BACKGROUND
function ttg_body_bottom( $style, $path ) { 
	echo '
<script src="./phplugins/js/simple-js-inheritance.js" type="text/javascript"></script>
<script src="./phplugins/js/stackblur.min.js" type="text/javascript"></script>
<script type="text/javascript">

if (
	(navigator.userAgent.match(/Android/i)) ||
	(navigator.userAgent.match(/Blackberry/i)) ||
	(navigator.userAgent.match(/SymbianOS/i)) ||
	(navigator.userAgent.match(/iPhone/i)) ||
	(navigator.userAgent.match(/iPod/i)) ||
	(navigator.userAgent.match(/iPad/i))
	) {} else {
	var blur = new Blur({ 
		el : document.querySelector("body"), 
		path : "photos/' . PAGEIMAGE . '", 
		radius : 1, 
		fullscreen : true 
	});
}
</script>
	';
} // END
blurry_full-screen_background_image.1355124147.txt.gz · Last modified: 2012/12/10 07:22 by admin