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. The end result can look something like this:
In all honestly, this is perhaps not the best way to do page backgrounds. But it's undeniably cool as a proof-of-concept, and I think it's fun to play with. Be sure to test the implementation in various browsers and contexts before deploying it permanently in production.
The effect utilizes the HTML5
<canvas> element, so will only work in modern browsers which support
<canvas>. Be sure to set a nice background-color as a fallback for older browsers.
Copy-and-paste the script below into your phplugins.php file.
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.