Check for css filter support. Use css filter on div with bg image of …

…thumbnail
cheung31 · Jul 11, 2013 · 73e5f50 · 73e5f50
1 parent 7c99c70
commit 73e5f50
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -242,6 +242,19 @@ SLABBY
     display: block;
     opacity: 0.8; }
 
+.css-blur {
+    -webkit-filter: blur(5px);
+    -moz-filter: blur(5px);
+    -o-filter: blur(5px);
+    filter: blur(5px);
+}
+.thumb > div {
+    width: 100%;
+    height: 100%;
+    background-size: 235px;
+    background-repeat: no-repeat;
+}
+
 .slab.centered .thumb{
     display: none;
     top: 210px;

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8" />
         <title>recently.</title>
-        <link rel="stylesheet" type="text/css" href="css/style-min.css" />
+        <link rel="stylesheet" type="text/css" href="css/style.css" />
     </head>
 
     <body>

diff --git a/js/slabby.js b/js/slabby.js
@@ -22,6 +22,13 @@ var _s = {
     })
 };
 
+function cssFiltersSupported() {
+    var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
+    var el = document.createElement('div');
+    el.style.cssText = prefixes.join('filter:blur(2px); ');
+    return !!el.style.length && ((document.documentMode === undefined || document.documentMode > 9));
+}
+
 $(document).ready(function () {
     var i,
         $slabbies,
@@ -178,7 +185,11 @@ Slabby.appendSlab = function (slab, slabby_name) {
     if (slab.id)
         html += 'id="' + slab.id + '" ';
     html += 'class="slab" style=""><div class="focused_frame"><img class="full_photo" src="' + slab.image_url + '">';
-    html += '<div class="thumb"><svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" baseProfile="full"><defs xmlns="http://www.w3.org/2000/svg"><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur></filter></defs><image x="7" y="7" width="235" height="235" xlink:href="' + slab.image_url + '" style="filter:url(#gaussian_blur)"></image></svg>';
+    if (cssFiltersSupported()) {
+        html += '<div class="thumb"><div class="css-blur" style="background-image:url(' + slab.image_url + ');"</div>';
+    } else {
+        html += '<div class="thumb"><svg xmlns:svg="http://www.w3.org/2000/svg" version="1.1" baseProfile="full"><defs xmlns="http://www.w3.org/2000/svg"><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur></filter></defs><image x="7" y="7" width="235" height="235" xlink:href="' + slab.image_url + '" style="filter:url(#gaussian_blur)"></image></svg>';
+    }
     html += '</div></div></div>';
     $('.slabby', '#'+slabby_name).append(html);
 };