Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial Commit (v0.1)

  • Loading branch information...
commit b9eaa323f00e643390f86128f22d5317122f61e1 0 parents
@prydie authored
7 README
@@ -0,0 +1,7 @@
+A jQuery plugin for greyscaleing images on the fly and then colouring them on hover.
+
+See example.html for a usage.
+
+Tested in IE6-9, Safari, Chrome and FireFox.
+
+Please send bug reports and feature requests to andrew@pryde-design.co.uk
34 example.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>jQuery GreyScale Plugin</title>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+ <script src="greyScale.js"></script>
+ </head>
+ <style>
+ a {
+ display: block;
+ text-align: center;
+ }
+ </style>
+ <body>
+ <a href="image.png">
+ <img src="image.jpg" alt="Image" class="greyScale" />
+ </a>
+ <a href="http://www.pryde-design.co.uk">
+ <img src="http://www.pryde-design.co.uk/pd-header.png" alt="Image" class="greyScale" />
+ </a>
+ <script>
+ $(function() {
+ $('.greyScale').hide().fadeIn(1000); // fade in the grayscaled images to avoid visual jump
+ });
+ $(window).load(function // user window.load to ensure images have been loaded
+ $('.greyScale').greyScale({
+ fadeTime: 500 // call the plugin with non-defult fadeTime (default: 400ms)
+ });
+ });
+ </script>
+ </body>
+</html>
+
114 greyScale.js
@@ -0,0 +1,114 @@
+/*
+ * jQuery $.greyScale Plugin 0.1
+ * Written by Andrew Pryde (www.pryde-design.co.uk)
+ * Date: Mon 1 Aug 2011
+ */
+
+(function($){
+
+ $.fn.greyScale = function(args) {
+ $options = $.extend({
+ fadeTime: 400
+ }, args);
+ function greyScale(image, width, height) {
+ can = $('<canvas>')
+ .css({
+ 'display' : 'none',
+ 'left' : '0',
+ 'position' : 'absolute',
+ 'top' : '0'
+ })
+ .attr({
+ 'width': width,
+ 'height': height
+ })
+ .addClass('gsCanvas');
+ ctx = can[0].getContext('2d');
+ ctx.drawImage(image, 0, 0, width, height);
+
+ imageData = ctx.getImageData(0, 0, width, height);
+ px = imageData.data;
+ for (i = 0; i < px.length; i+= 4) {
+ grey = px[i] * .3 + px[i+1] * .59 + px[i+2] * .11;
+ px[i] = px[i+1] = px[i+2] = grey;
+ }
+ ctx.putImageData(imageData, 0, 0);
+ return can;
+ }
+ if ($.browser.msie) {
+ // IE doesn't support Canvas so use it's horrible filter syntax instead
+ this.each(function(){
+ $(this).css({
+ 'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)',
+ 'zoom': '1'
+ });
+ $(this).hover(function() {
+ $(this).css({
+ 'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)'
+ });
+ }, function() {
+ $(this).css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)');
+ });
+ });
+ } else {
+ this.each(function(index) {
+ $(this).wrap('<div class="gsWrapper">');
+ gsWrapper = $(this).parent();
+ gsWrapper.css({
+ 'position' : 'relative',
+ 'display' : 'inline-block'
+ });
+ console.log();
+ if (window.location.hostname !== this.src.split('/')[2]) {
+ // if the image is on a different url proxy the request
+ $.getImageData({
+ url: $(this).attr('src'),
+ success: $.proxy(function(image) {
+ can = greyScale(image, image.width, image.height);
+ can.appendTo(gsWrapper).fadeIn($options.fadeTime);
+ }, gsWrapper),
+ error: function(xhr, text_status){
+ // silently fail on error
+ }
+ });
+ } else { // if the url isn't local don't proxy the request
+ can = greyScale($(this)[0], $(this).width(), $(this).height());
+ can.appendTo(gsWrapper).fadeIn($options.fadeTime);
+ }
+ });
+
+ $(this).parent().delegate('.gsCanvas', 'mouseover mouseout', function(event) {
+ (event.type == 'mouseover') && $(this).stop().animate({'opacity': '0'}, $options.fadeTime);
+ (event.type == 'mouseout') && $(this).stop().animate({'opacity': '1'}, $options.fadeTime);
+ });
+ }
+ };
+})( jQuery );
+
+/*
+ *
+ * jQuery $.getImageData Plugin 0.3
+ * http://www.maxnov.com/getimagedata
+ *
+ * Written by Max Novakovic (http://www.maxnov.com/)
+ * Date: Thu Jan 13 2011
+ *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *
+ * Includes jQuery JSONP Core Plugin 2.1.4
+ * http://code.google.com/p/jquery-jsonp/
+ * Copyright 2010, Julian Aubourg
+ * Released under the MIT License.
+ *
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+ *
+ * Copyright 2011, Max Novakovic
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://www.maxnov.com/getimagedata/#license
+ *
+ */
+(function(c,g){function n(){}function o(a){s=[a]}function e(a,j,k){return a&&a.apply(j.context||j,k)}function h(a){function j(b){!l++&&g(function(){p();q&&(t[d]={s:[b]});z&&(b=z.apply(a,[b]));e(a.success,a,[b,A]);e(B,a,[a,A])},0)}function k(b){!l++&&g(function(){p();q&&b!=C&&(t[d]=b);e(a.error,a,[a,b]);e(B,a,[a,b])},0)}a=c.extend({},D,a);var B=a.complete,z=a.dataFilter,E=a.callbackParameter,F=a.callback,R=a.cache,q=a.pageCache,G=a.charset,d=a.url,f=a.data,H=a.timeout,r,l=0,p=n;a.abort=function(){!l++&&
+p()};if(e(a.beforeSend,a,[a])===false||l)return a;d=d||u;f=f?typeof f=="string"?f:c.param(f,a.traditional):u;d+=f?(/\?/.test(d)?"&":"?")+f:u;E&&(d+=(/\?/.test(d)?"&":"?")+encodeURIComponent(E)+"=?");!R&&!q&&(d+=(/\?/.test(d)?"&":"?")+"_"+(new Date).getTime()+"=");d=d.replace(/=\?(&|$)/,"="+F+"$1");q&&(r=t[d])?r.s?j(r.s[0]):k(r):g(function(b,m,v){if(!l){v=H>0&&g(function(){k(C)},H);p=function(){v&&clearTimeout(v);b[I]=b[w]=b[J]=b[x]=null;i[K](b);m&&i[K](m)};window[F]=o;b=c(L)[0];b.id=M+S++;if(G)b[T]=
+G;var O=function(y){(b[w]||n)();y=s;s=undefined;y?j(y[0]):k(N)};if(P.msie){b.event=w;b.htmlFor=b.id;b[I]=function(){/loaded|complete/.test(b.readyState)&&O()}}else{b[x]=b[J]=O;P.opera?(m=c(L)[0]).text="jQuery('#"+b.id+"')[0]."+x+"()":b[Q]=Q}b.src=d;i.insertBefore(b,i.firstChild);m&&i.insertBefore(m,i.firstChild)}},0);return a}var Q="async",T="charset",u="",N="error",M="_jqjsp",w="onclick",x="on"+N,J="onload",I="onreadystatechange",K="removeChild",L="<script/>",A="success",C="timeout",P=c.browser,
+i=c("head")[0]||document.documentElement,t={},S=0,s,D={callback:M,url:location.href};h.setup=function(a){c.extend(D,a)};c.jsonp=h})(jQuery,setTimeout);
+(function(c){c.getImageData=function(a){var f=/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;if(a.url){var g=location.protocol==="https:",e="";e=a.server&&f.test(a.server)&&a.server.indexOf("https:")&&(g||a.url.indexOf("https:"))?a.server:"//img-to-json.appspot.com/?callback=?";c.jsonp({url:e,data:{url:escape(a.url)},dataType:"jsonp",timeout:1E4,success:function(b){var d=new Image;c(d).load(function(){this.width=b.width;this.height=b.height;typeof a.success==typeof Function&& a.success(this)}).attr("src",b.data)},error:function(b,d){typeof a.error==typeof Function&&a.error(b,d)}})}else typeof a.error==typeof Function&&a.error(null,"no_url")}})(jQuery);
1  greyScale.min.js
@@ -0,0 +1 @@
+(function(a){a.fn.greyScale=function(c){$options=a.extend({fadeTime:400},c);function b(f,e,d){can=a("<canvas>").css({display:"none",left:"0",position:"absolute",top:"0"}).attr({width:e,height:d}).addClass("gsCanvas");ctx=can[0].getContext("2d");ctx.drawImage(f,0,0,e,d);imageData=ctx.getImageData(0,0,e,d);px=imageData.data;for(i=0;i<px.length;i+=4){grey=px[i]*0.3+px[i+1]*0.59+px[i+2]*0.11;px[i]=px[i+1]=px[i+2]=grey}ctx.putImageData(imageData,0,0);return can}if(a.browser.msie){this.each(function(){a(this).css({filter:"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",zoom:"1"});a(this).hover(function(){a(this).css({filter:"progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)"})},function(){a(this).css("filter","progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)")})})}else{this.each(function(d){a(this).wrap('<div class="gsWrapper">');gsWrapper=a(this).parent();gsWrapper.css({position:"relative",display:"inline-block"});console.log();if(window.location.hostname!==this.src.split("/")[2]){a.getImageData({url:a(this).attr("src"),success:a.proxy(function(e){can=b(e,e.width,e.height);can.appendTo(gsWrapper).fadeIn($options.fadeTime)},gsWrapper),error:function(f,e){}})}else{can=b(a(this)[0],a(this).width(),a(this).height());can.appendTo(gsWrapper).fadeIn($options.fadeTime)}});a(this).parent().delegate(".gsCanvas","mouseover mouseout",function(d){(d.type=="mouseover")&&a(this).stop().animate({opacity:"0"},$options.fadeTime);(d.type=="mouseout")&&a(this).stop().animate({opacity:"1"},$options.fadeTime)})}}})(jQuery);(function(X,V){function O(){}function H(c){E=[c]}function W(c,g,e){return c&&c.apply(g.context||g,e)}function U(A){function s(K){!n++&&V(function(){g();e&&(z[w]={s:[K]});x&&(K=x.apply(A,[K]));W(A.success,A,[K,G]);W(h,A,[A,G])},0)}function o(K){!n++&&V(function(){g();e&&K!=F&&(z[w]=K);W(A.error,A,[A,K]);W(h,A,[A,K])},0)}A=X.extend({},B,A);var h=A.complete,x=A.dataFilter,J=A.callbackParameter,I=A.callback,t=A.cache,e=A.pageCache,D=A.charset,w=A.url,u=A.data,C=A.timeout,c,n=0,g=O;A.abort=function(){!n++&&g()};if(W(A.beforeSend,A,[A])===false||n){return A}w=w||y;u=u?typeof u=="string"?u:X.param(u,A.traditional):y;w+=u?(/\?/.test(w)?"&":"?")+u:y;J&&(w+=(/\?/.test(w)?"&":"?")+encodeURIComponent(J)+"=?");!t&&!e&&(w+=(/\?/.test(w)?"&":"?")+"_"+(new Date).getTime()+"=");w=w.replace(/=\?(&|$)/,"="+I+"$1");e&&(c=z[w])?c.s?s(c.s[0]):o(c):V(function(L,K,M){if(!n){M=C>0&&V(function(){o(F)},C);g=function(){M&&clearTimeout(M);L[q]=L[v]=L[p]=L[r]=null;R[m](L);K&&R[m](K)};window[I]=H;L=X(l)[0];L.id=k+b++;if(D){L[a]=D}var N=function(P){(L[v]||O)();P=E;E=undefined;P?s(P[0]):o(j)};if(f.msie){L.event=v;L.htmlFor=L.id;L[q]=function(){/loaded|complete/.test(L.readyState)&&N()}}else{L[r]=L[p]=N;f.opera?(K=X(l)[0]).text="jQuery('#"+L.id+"')[0]."+r+"()":L[d]=d}L.src=w;R.insertBefore(L,R.firstChild);K&&R.insertBefore(K,R.firstChild)}},0);return A}var d="async",a="charset",y="",j="error",k="_jqjsp",v="onclick",r="on"+j,p="onload",q="onreadystatechange",m="removeChild",l="<script/>",G="success",F="timeout",f=X.browser,R=X("head")[0]||document.documentElement,z={},b=0,E,B={callback:k,url:location.href};U.setup=function(c){X.extend(B,c)};X.jsonp=U})(jQuery,setTimeout);(function(a){a.getImageData=function(b){var d=/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;if(b.url){var c=location.protocol==="https:",h="";h=b.server&&d.test(b.server)&&b.server.indexOf("https:")&&(c||b.url.indexOf("https:"))?b.server:"//img-to-json.appspot.com/?callback=?";a.jsonp({url:h,data:{url:escape(b.url)},dataType:"jsonp",timeout:10000,success:function(e){var f=new Image;a(f).load(function(){this.width=e.width;this.height=e.height;typeof b.success==typeof Function&&b.success(this)}).attr("src",e.data)},error:function(e,f){typeof b.error==typeof Function&&b.error(e,f)}})}else{typeof b.error==typeof Function&&b.error(null,"no_url")}}})(jQuery);
BIN  image.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.