Initial Commit (v0.1)

prydie · Aug 1, 2011 · b9eaa32 · b9eaa32
commit b9eaa32
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 0 deletions.
diff --git a/README b/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
diff --git a/example.html b/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>
+
diff --git a/greyScale.js b/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);
diff --git a/greyScale.min.js b/greyScale.min.js
diff --git a/image.jpg b/image.jpg