bchau

Gotcha, the guy who wrote the script said to put this at the bottom: <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type='text/javascript' src='js/modernizr.custom.js'></script> <script type='text/javascript' src='js/imagesloaded.pkgd.min.js'></script> <script type='text/javascript' src='js/grayscale.js'></script> <script type='text/javascript' src="js/functions.js"></script> I'm assuming the first line is the jquery code, so how should i implement that into the code? (this is all new to me)

I got some help in the CSS forum the other day, got my CSS code to work with everything but IE10+. I was directed to this tutorial with how to add javascript to make it work. I'm not familiar with javascript at all. This is what i have so far: $(document).imagesLoaded( function() { /** Script tests browser features and tells if the Browser is IE10 or IE11 Target IE 10 with JavaScript and CSS property detection. # 2013 by Tim Pietrusky # timpietrusky.com **/ // IE 10 only CSS properties var ie10Styles = [ 'msTouchAction', 'msWrapFlow']; var ie11Styles = [ 'msTextCombineHorizontal']; /* * Test all IE only CSS properties */ var d = document; var b = d.body; var s = b.style; var brwoser = null; var property; // Tests IE10 properties for (var i = 0; i < ie10Styles.length; i++) { property = ie10Styles[i]; if (s[property] != undefined) { brwoser = "ie10"; } } // Tests IE11 properties for (var i = 0; i < ie11Styles.length; i++) { property = ie11Styles[i]; if (s[property] != undefined) { brwoser = "ie11"; } } //Grayscale images only on browsers IE10+ since they removed support for CSS grayscale filter if(brwoser == "ie10" || brwoser == "ie11" ){ $('body').addClass('ie11'); // Fixes marbin issue on IE10 and IE11 after canvas function on images $('.project-image').each(function(){ var el = $(this); el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale ieImage').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 = grayscaleIe(this.src); }); // Quick animation on IE10+ $('.project-image').hover( function () { $(this).parent().find('img:first').stop().animate({opacity:1}, 200); }, function () { $('.project-image').stop().animate({opacity:0}, 200); } ); // Custom grayscale function for IE10 and IE11 function grayscaleIe(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 the browser does not support CSS filters filters, we are applying grayscale.js function // This part of Grayscale images applies on Opera, Firefox and Safari browsers if (!Modernizr.cssfilters) { var $images = $(".project-image"), 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($('.project-image')); $(".project-image").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"); } }); }}); <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type='text/javascript' src='js/modernizr.custom.js'></script> <script type='text/javascript' src='js/imagesloaded.pkgd.min.js'></script> <script type='text/javascript' src='js/grayscale.js'></script> <script type='text/javascript' src="js/functions.js"></script> What do i need to fix to make the B&W to Color hover effect work for IE? This is the CSS code i'm currently using for Safari, Opera, Firefox, and Chrome: #projectThumbs .project .project-image .intrinsic div img {filter: url("data:image/svg+xml;utf8,<svg xmlns = 'http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#grayscale");filter: gray;filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}#projectThumbs .project .project-image .intrinsic:hover img {filter: grayscale(0%);-webkit-filter: grayscale(0%);filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");}

Thanks! Got it to work properly on Firefox. I was reading this site, found a link to it from the comments of the site you linked. How would i go about adding support for IE10+? My code looks like this now: #projectThumbs .project .project-image .intrinsic div img {filter: url("data:image/svg+xml;utf8,<svg xmlns = 'http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#grayscale");filter: gray;filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}#projectThumbs .project .project-image .intrinsic:hover img {filter: grayscale(0%);-webkit-filter: grayscale(0%);filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");} Half of the office i'm working for uses IE9-11, so i'd like to get all browsers covered.

I'm setting up a Squarespace page (Avenue Template) for a client of mine. My client requested that the thumbnails on the Index (gallery) pages be b&w and change to color when you hover over the thumbnail with your mouse. To implement this for specific pages and not site wide, you put the code into Page Header Code Injection on the settings for the page you want it to work on (Index page). I had a few issues getting it to work, but i got some help from a awesome guy on answers.squarespace (forum). I finally got it to work yesterday and it did exactly what i wanted. The issue is it works when viewed on Chrome & Safari, but not Firefox & IE, which is an issue. If i view the page on Firefox/IE, the thumbnails aren't showing, they'll show up if i hover over them. Here is the code i'm currently using: #projectThumbs .project .project-image .intrinsic div img {filter: url("data:image/svg+xml;utf8,<svg%20xmlns = 'http://www.w3.org/2000/svg'><filte…200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");filter: gray;filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);}#projectThumbs .project .project-image .intrinsic:hover img {filter: grayscale(0%);-webkit-filter: grayscale(0%);filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");} The page i'm referring to, it'll show properly if you use Chrome/Safari. What changes do i need to make? Attached are some screenshots of the issue.