User Tools

Site Tools


blurry_full-screen_background_image

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

blurry_full-screen_background_image [2012/12/10 07:22]
admin
blurry_full-screen_background_image [2012/12/10 07:55] (current)
admin
Line 1: Line 1:
 ====== Blurry, Full-screen Background-image ====== ====== 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 [[http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html|StackBlur]] algorithm, as implemented by [[https://github.com/listenrightmeow/stackblur-canvas|listenrightmeow]].+This function assigns a background-image to your page, stretches it to full-screen, then blurs it. The blur effect is achieved using the [[http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html|StackBlur]] algorithm, as implemented by [[https://github.com/listenrightmeow/stackblur-canvas|listenrightmeow]]. The end result can look something like this: 
 + 
 +{{:wiki:stackblur-pic.jpg?nolink|}} 
 + 
 +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. Copy-and-paste the script below into your phplugins.php file.
Line 10: Line 16:
 // IMPLEMENT STACKBLUR.JS TO BLUR PAGE BACKGROUND, USING THE "PAGE IMAGE" DEFINED IN LR AS BACKGROUND // IMPLEMENT STACKBLUR.JS TO BLUR PAGE BACKGROUND, USING THE "PAGE IMAGE" DEFINED IN LR AS BACKGROUND
 function ttg_body_bottom( $style, $path ) {  function ttg_body_bottom( $style, $path ) { 
- if ( G_STYLE != 'CE3-MOBILE' ) { 
  echo '  echo '
 <script src="./phplugins/js/simple-js-inheritance.js" type="text/javascript"></script> <script src="./phplugins/js/simple-js-inheritance.js" type="text/javascript"></script>
 <script src="./phplugins/js/stackblur.min.js" type="text/javascript"></script> <script src="./phplugins/js/stackblur.min.js" type="text/javascript"></script>
 <script type="text/javascript"> <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({   var blur = new Blur({ 
  el : document.querySelector("body"),   el : document.querySelector("body"), 
Line 21: Line 35:
  fullscreen : true   fullscreen : true 
  });  });
 +}
 </script> </script>
  ';  ';
- } 
 } // END } // END
 </code> </code>
Line 38: Line 52:
  
 The background-image will load only after all page content has finished loading. The background-image will load only after all page content has finished loading.
 +
 +The script above uses Javascript to detect iPhone, iPad, Android and other mobile devices, and kills the effect on those devices.
  
 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. 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. 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: 
- 
----- 
- 
-<code> 
-// 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 
-</code> 
blurry_full-screen_background_image.1355124147.txt.gz · Last modified: 2012/12/10 07:22 by admin