Cross-Browser Grayscale image example using CSS3 + JS Nguồn http://www.majas-lapu-izstrade.lv/

In categories: Tutorials, Website development

There are a lot of examples and tutorials about how to create grayscale images using CSS , CSS3 and JS, but while developing a project for one of my clients, I found out that there is no solution that would be cross-browser compatible and would support the latest Internet Explorer 10 and 11 versions. This is the reason I came up with a solution of my own and decided to share it with you.

Update: This tutorial uses browser user agent detection which is fully functional but has been deprecated for a while so I have created another grayscale image tutorial that uses browser feature detection.

Grayscale and Internet explorer 10, 11

Grayscale filter has been natively supported by Internet Explorer since version 6, but recently Microsoft decided to remove this native CSS filter and since version 10, IE does not display grayscale images using the old technique.

This is the reason why we now have to turn to grayscale JS solution. Besides this, Microsoft has released the new IE11, which is trying to hide as a different browser. Now Internet Explorer 11 has changed its user-agent and pretends to be a Gecko or WebKit browser. This is a pretty nifty move by Microsoft in order to render new IE11 on most browsers as a Gecko browser and not like the previous versions with MSIE user-agent (we all know that there are a lot of websites that check for MSIE user-agent and bring up non-standard markup). So I had to overcome this new problem as well – checking the user-agent and firing only the SVG (Scalable Vector Graphics) grayscale JS solution that is intended for IE10+ (IE6-9 support CSS grayscale).

Grayscale on Opera and Safari

Opera and Safari browsers do not support CSS grayscale filters so these browsers must be treated separately just like IE10+. Only these browsers can be fixed using JS solution which has been kindly provided by James Padolsey

Cross-Browser Grayscale image solution

Include jQuery library

1 2	<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

This is the content of the HTML document – a simple container with images

1 2 3 4 5

<div class="image-container">     <img src="images/image-1.jpg" alt="" title=""/>     <img src="images/image-2.jpg" alt="" title=""/>     <img src="images/image-3.jpg" alt="" title=""/> </div>

Firefox 3.5+, Chrome, Internet explorer 6 – 9

These browsers will be happy to serve us with CSS grayscale filters. Simply add these CSS lines in your stylesheet

1 2 3 4 5 6 7 8 9

img {     filter: url('../js/filters.svg#grayscale'); /* Firefox 3.5+ */     filter: gray; /* IE6-9 */     -webkit-filter: grayscale(1); /* Webkit Nightlies & Google Chrome Canary */ } img:hover {     filter: none; /* Applies to FF + IE */     -webkit-filter: grayscale(0); }

Opera 9+, Safari 4+, Internet Explorer 10+

As mentioned before, Opera and Safari browsers need to grayscale solution that uses JS

1 2	<script type='text/javascript' src='js/grayscale.js'></script> <script type='text/javascript' src="js/functions.js"></script>

That’s all about my cross-browser grayscale image solution setup. You can check out the demo or download the source. For those of you who want to get into more details, I have explained the magic behind the functions.js file, so that you could tweak the code as you need.

Tested and should work on:

• Firefox 3.5+
• Chrome, Safari 4+
• Opera 9+
• Internet Explorer 7, 8, 9, 10 and 11 (IE11)

View the demo or Download source

Update: This tutorial uses browser user agent detection which is fully functional but has been deprecated for a while so I have created another grayscale image tutorial that uses browser feature detection.

Explanation and contents of functions.js file

This function getBrowser() checks the browser user agent and after that adds corresponding class to the <body> tag – this way we can target browser with CSS or fire JS functions only on those browsers that we want (Except IE11 because of the new user-agent)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

// Detection function to tell what kind of browser is used function getBrowser(){     var userAgent = navigator.userAgent.toLowerCase();     $.browser.chrome = /chrome/.test(userAgent);     $.browser.safari= /webkit/.test(userAgent);     $.browser.opera=/opera/.test(userAgent);     $.browser.msie=/msie/.test( userAgent ) && !/opera/.test( userAgent );     $.browser.mozilla= /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ) || /firefox/.test(userAgent);       if($.browser.chrome) return "chrome";     if($.browser.mozilla) return "mozilla";     if($.browser.opera) return "opera";     if($.browser.safari) return "safari";     if($.browser.msie) return "ie"; };   // This block simply ads a corresponding class to the body tag so that we can target browsers with CSS classes if(getBrowser()=='mozilla'){     $('body').addClass('mozilla'); } else if(getBrowser()=='ie'){     $('body').addClass('ie'); } else if(getBrowser()=='opera'){     $('body').addClass('opera'); } else if (getBrowser()=='safari'){ // safari     $('body').addClass('safari'); } else if(getBrowser()=='chrome'){     $('body').addClass('chrome'); };

Since IE11 cannot be detected like this because the new user agent on IE11 is trying to hide as Mozilla, we detect IE11 with this function

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function getInternetExplorerVersion(){     var rv = -1;     if (navigator.appName == 'Microsoft Internet Explorer'){         var ua = navigator.userAgent;         var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");         if (re.exec(ua) != null)         rv = parseFloat( RegExp.$1 );     }     else if (navigator.appName == 'Netscape'){         var ua = navigator.userAgent;         var re  = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");         if (re.exec(ua) != null)         rv = parseFloat( RegExp.$1 );     } return rv; };   if (getInternetExplorerVersion() >= 10){     $('body').addClass('ie11'); };

After we have created a way to tell what kind of browser is used by the user, we can start to target Grayscale image solutions with JS to the browsers that need it. I will start with Opera and Safari

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

// Grayscale images on Safari and Opera browsers if(getBrowser()=='opera' || getBrowser()=='safari'){     var $images = $("img")     , imageCount = $images.length     , counter = 0;       // One instead of on, because it need only fire once per image     $images.one("load",function(){         // increment counter every time an image finishes loading         counter++;         if (counter == imageCount) {             // do stuff when all have loaded             grayscale($('img'));             $("img").hover(function () {                 grayscale.reset($(this));             },             function () {                 grayscale($(this));             }        );     }     }).each(function () {         if (this.complete) {              // manually trigger load event in event of a cache pull              $(this).trigger("load");         }     }); };

After this, all that is left is to deal with IE10+ browsers and these lines of JS do exactly that (using SVG JS solution)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

// Grayscale images only on browsers IE10+ since they removed support for CSS grayscale filter if (getInternetExplorerVersion() >= 10){     $('img').each(function(){         var el = $(this);         el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"5","opacity":"0"}).insertBefore(el).queue(function(){         var el = $(this);         el.parent().css({"width":this.width,"height":this.height});         el.dequeue();     }); this.src = grayscaleIE10(this.src); });   // Quick animation on IE10+     $('img').hover(function () {         $(this).parent().find('img:first').stop().animate({opacity:1}, 200);     },     function () {         $('.img_grayscale').stop().animate({opacity:0}, 200);     } );   function grayscaleIE10(src){     var canvas = document.createElement('canvas');     var ctx = canvas.getContext('2d');     var imgObj = new Image();     imgObj.src = src;     canvas.width = imgObj.width;     canvas.height = imgObj.height;     ctx.drawImage(imgObj, 0, 0);     var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);     for(var y = 0; y < imgPixels.height; y++){         for(var x = 0; x < imgPixels.width; x++){             var i = (y * 4) * imgPixels.width + x * 4;             var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;             imgPixels.data[i] = avg;             imgPixels.data[i + 1] = avg;             imgPixels.data[i + 2] = avg;          }      }     ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);     return canvas.toDataURL();     }; };

If you have any further questions, suggestions about cross-browser grayscale image example using CSS3 + JS, feel free to write them below or contact me personally.

View the demo or Download source

Sưu tầm