diff --git a/LICENSE.txt b/LICENSE.txt index 08cd524..c8bd996 100644 --- a/LICENSE.txt +++ b/LICENSE.txt @@ -1,6 +1,6 @@ /** * - * Version: 0.2.6 + * Version: 0.2.7 * Author: Gianluca Guarini * Contact: gianluca.guarini@gmail.com * Website: http://www.gianlucaguarini.com/ diff --git a/ajax-contents.html b/ajax-contents.html index 3a6e453..38daaad 100644 --- a/ajax-contents.html +++ b/ajax-contents.html @@ -42,7 +42,7 @@ - + diff --git a/bower.json b/bower.json index 2e1965c..e91350d 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "jquery.BlackAndWhite", - "version": "0.2.6", + "version": "0.2.7", "main": "jquery.BlackAndWhite.js", "ignore": [ "**/.*", diff --git a/demo.html b/demo.html index b089565..d611891 100644 --- a/demo.html +++ b/demo.html @@ -53,7 +53,7 @@ - + + diff --git a/jquery.BlackAndWhite.js b/jquery.BlackAndWhite.js index 85823e3..51c6de4 100644 --- a/jquery.BlackAndWhite.js +++ b/jquery.BlackAndWhite.js @@ -1,6 +1,6 @@ /** * - * Version: 0.2.6 + * Version: 0.2.7 * Author: Gianluca Guarini * Contact: gianluca.guarini@gmail.com * Website: http://www.gianlucaguarini.com/ @@ -50,11 +50,11 @@ * */ var hoverEffect = options.hoverEffect, - webworkerPath = options.webworkerPath, - invertHoverEffect = options.invertHoverEffect, - responsive = options.responsive, - fadeSpeedIn = $.isPlainObject(options.speed) ? options.speed.fadeIn : options.speed, - fadeSpeedOut = $.isPlainObject(options.speed) ? options.speed.fadeOut : options.speed; + webworkerPath = options.webworkerPath, + invertHoverEffect = options.invertHoverEffect, + responsive = options.responsive, + fadeSpeedIn = $.isPlainObject(options.speed) ? options.speed.fadeIn : options.speed, + fadeSpeedOut = $.isPlainObject(options.speed) ? options.speed.fadeOut : options.speed; var isIE7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false; @@ -93,14 +93,14 @@ * */ var supportsCanvas = !!document.createElement('canvas').getContext, - $window = $(window), - /* Check if Web Workers are supported */ - supportWebworker = (function () { - return (typeof (Worker) !== "undefined") ? true : false; - }()), - cssFilter = cssPrefix('Filter'), - imagesArray = [], - BnWWorker = supportWebworker && webworkerPath ? new Worker(webworkerPath + "BnWWorker.js") : false; + $window = $(window), + /* Check if Web Workers are supported */ + supportWebworker = (function () { + return (typeof (Worker) !== "undefined") ? true : false; + }()), + cssFilter = cssPrefix('Filter'), + imagesArray = [], + BnWWorker = supportWebworker && webworkerPath ? new Worker(webworkerPath + "BnWWorker.js") : false; /** * @@ -108,7 +108,7 @@ * */ var _onMouseLeave = function (e) { - $(e.currentTarget).find('.BWfade').stop(true, true)[!invertHoverEffect ? 'fadeIn' : 'fadeOut'](fadeSpeedIn); + $(e.currentTarget).find('.BWfade').stop(true, true)[!invertHoverEffect ? 'fadeIn' : 'fadeOut'](fadeSpeedOut); }; var _onMouseEnter = function (e) { $(e.currentTarget).find('.BWfade').stop(true, true)[invertHoverEffect ? 'fadeIn' : 'fadeOut'](fadeSpeedIn); @@ -133,9 +133,9 @@ //convert any image into B&W using HTML5 canvas var _manipulateImage = function (img, canvas, width, height) { var ctx = canvas.getContext('2d'), - currImg = img, - i = 0, - grey; + currImg = img, + i = 0, + grey; ctx.drawImage(img, 0, 0, width, height); @@ -169,22 +169,19 @@ var _injectTags = function ($img, $imageWrapper) { var pic = $img[0], - src = pic.src, - width = $img.width(), - height = $img.height(), - css = { - 'position': 'absolute', - top: 0, - left: 0, - display: invertHoverEffect ? 'none' : 'block', - width:width, - height:height - }; - + src = pic.src, + width = $img.width(), + height = $img.height(), + css = { + 'position': 'absolute', + top: 0, + left: 0, + display: invertHoverEffect ? 'none' : 'block' + }; if (supportsCanvas && !cssfilters) { var realWidth = pic.width, - realHeight = pic.height; + realHeight = pic.height; //adding the canvas $('').prependTo($imageWrapper); @@ -196,7 +193,7 @@ _manipulateImage(pic, $canvas[0], realWidth, realHeight); } else { - + css[cssPrefix('Filter')] = 'grayscale(100%)'; //adding the canvas $(' ').prependTo($imageWrapper); @@ -238,15 +235,9 @@ this.resizeImages = function () { $container.each(function (index, currImageWrapper) { - var pic = $(currImageWrapper).find('img:not(.BWFilter)'); - var currWidth,currHeight; - if (isIE7) { - currWidth = $(pic).prop('width'); - currHeight = $(pic).prop('height'); - } else { - currWidth = $(pic).width(); - currHeight = $(pic).height(); - } + var pic = $(currImageWrapper).find('img:not(.BWFilter)'), + currWidth = isIE7 ? $(pic).prop('width') : $(pic).width(), + currHeight = isIE7 ? $(pic).prop('height') : $(pic).height(); $(this).find('.BWFilter, canvas').css({ width: currWidth, diff --git a/responsive.html b/responsive.html index 2182faa..a065135 100644 --- a/responsive.html +++ b/responsive.html @@ -42,8 +42,7 @@ - - + diff --git a/src/jquery.BlackAndWhite.js b/src/jquery.BlackAndWhite.js index 16884d6..09bf6b5 100644 --- a/src/jquery.BlackAndWhite.js +++ b/src/jquery.BlackAndWhite.js @@ -50,11 +50,11 @@ * */ var hoverEffect = options.hoverEffect, - webworkerPath = options.webworkerPath, - invertHoverEffect = options.invertHoverEffect, - responsive = options.responsive, - fadeSpeedIn = $.isPlainObject(options.speed) ? options.speed.fadeIn : options.speed, - fadeSpeedOut = $.isPlainObject(options.speed) ? options.speed.fadeOut : options.speed; + webworkerPath = options.webworkerPath, + invertHoverEffect = options.invertHoverEffect, + responsive = options.responsive, + fadeSpeedIn = $.isPlainObject(options.speed) ? options.speed.fadeIn : options.speed, + fadeSpeedOut = $.isPlainObject(options.speed) ? options.speed.fadeOut : options.speed; var isIE7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false; @@ -93,14 +93,14 @@ * */ var supportsCanvas = !!document.createElement('canvas').getContext, - $window = $(window), - /* Check if Web Workers are supported */ - supportWebworker = (function () { - return (typeof (Worker) !== "undefined") ? true : false; - }()), - cssFilter = cssPrefix('Filter'), - imagesArray = [], - BnWWorker = supportWebworker && webworkerPath ? new Worker(webworkerPath + "BnWWorker.js") : false; + $window = $(window), + /* Check if Web Workers are supported */ + supportWebworker = (function () { + return (typeof (Worker) !== "undefined") ? true : false; + }()), + cssFilter = cssPrefix('Filter'), + imagesArray = [], + BnWWorker = supportWebworker && webworkerPath ? new Worker(webworkerPath + "BnWWorker.js") : false; /** * @@ -133,9 +133,9 @@ //convert any image into B&W using HTML5 canvas var _manipulateImage = function (img, canvas, width, height) { var ctx = canvas.getContext('2d'), - currImg = img, - i = 0, - grey; + currImg = img, + i = 0, + grey; ctx.drawImage(img, 0, 0, width, height); @@ -169,17 +169,17 @@ var _injectTags = function ($img, $imageWrapper) { var pic = $img[0], - src = pic.src, - width = $img.width(), - height = $img.height(), - css = { - 'position': 'absolute', - top: 0, - left: 0, - display: invertHoverEffect ? 'none' : 'block', - width:width, - height:height - }; + src = pic.src, + width = $img.width(), + height = $img.height(), + css = { + 'position': 'absolute', + top: 0, + left: 0, + display: invertHoverEffect ? 'none' : 'block', + width:width, + height:height + }; if (supportsCanvas && !cssfilters) { @@ -196,7 +196,7 @@ _manipulateImage(pic, $canvas[0], realWidth, realHeight); } else { - + console.log('s'); css[cssPrefix('Filter')] = 'grayscale(100%)'; //adding the canvas $(' ').prependTo($imageWrapper); @@ -244,8 +244,9 @@ currWidth = $(pic).prop('width'); currHeight = $(pic).prop('height'); } else { - currWidth = $(pic).width(); - currHeight = $(pic).height(); + console.log('ehy'); + currWidth = $img.attr('width') || $(pic).width(); + currHeight = $img.attr('height') || $(pic).height(); } $(this).find('.BWFilter, canvas').css({ diff --git a/src/jquery.BlackAndWhite.min.js b/src/jquery.BlackAndWhite.min.js index 8513d6a..a493d41 100644 --- a/src/jquery.BlackAndWhite.min.js +++ b/src/jquery.BlackAndWhite.min.js @@ -1,6 +1,6 @@ /** * - * Version: 0.2.6 + * Version: 0.2.7 * Author: Gianluca Guarini * Contact: gianluca.guarini@gmail.com * Website: http://www.gianlucaguarini.com/ @@ -8,9 +8,4 @@ * * Copyright (c) 2013 Gianluca Guarini */ -(function(e){e.fn.extend({BlackAndWhite:function(d){var j=this;d=e.extend({hoverEffect:!0,webworkerPath:!1,responsive:!0,invertHoverEffect:!1,speed:500,onImageReady:null},d);var y=d.hoverEffect,s=d.webworkerPath,q=d.invertHoverEffect,z=d.responsive,t=e.isPlainObject(d.speed)?d.speed.fadeIn:d.speed;e.isPlainObject(d.speed);var A=document.all&&!window.opera&&window.XMLHttpRequest?!0:!1,m={},u=function(c){if(m[c]||""===m[c])return m[c]+c;var e=document.createElement("div"),b=" Moz Webkit O ms Khtml".split(" "), -a;for(a in b)if("undefined"!==typeof e.style[b[a]+c])return m[c]=b[a],b[a]+c;return c.toLowerCase()},v,n=document.createElement("div");n.style.cssText=" -webkit- -moz- -o- -ms- ".split(" ").join("filter:blur(2px); ");v=!!n.style.length&&(void 0===document.documentMode||9').prependTo(d);a=d.find("canvas");a.css(h);h=a[0].getContext("2d");a=0;h.drawImage(b,0,0,g,f);var f=h.getImageData(0,0,g,f),k=f.data,j=k.length;if(p)l.push({imageData:f,ctx:h,img:b});else{for(;a ').prependTo(d),e(".BWFilter").css(e.extend(h, -{filter:"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"})),r(b)};this.init=function(){j.each(function(c,d){var b=e(d),a=b.find("img");if(a.width())x(a,b);else a.on("load",function(){x(a,b)})});p&&w();y&&(j.on("mouseleave",D),j.on("mouseenter",E));if(z)C.on("resize orientationchange",j.resizeImages)};this.resizeImages=function(){j.each(function(c,d){var b=e(d).find("img:not(.BWFilter)"),a;A?(a=e(b).prop("width"),b=e(b).prop("height")):(a=e(b).width(),b=e(b).height());e(this).find(".BWFilter, canvas").css({width:a, -height:b})})};return this.init(d)}})})(jQuery); \ No newline at end of file +!function(a){a.fn.extend({BlackAndWhite:function(b){"use strict";var c=this,d={hoverEffect:!0,webworkerPath:!1,responsive:!0,invertHoverEffect:!1,speed:500,onImageReady:null};b=a.extend(d,b);var e=b.hoverEffect,f=b.webworkerPath,g=b.invertHoverEffect,h=b.responsive,i=a.isPlainObject(b.speed)?b.speed.fadeIn:b.speed,j=a.isPlainObject(b.speed)?b.speed.fadeOut:b.speed,k=document.all&&!window.opera&&window.XMLHttpRequest?!0:!1,l=" -webkit- -moz- -o- -ms- ".split(" "),m={},n=function(a){if(m[a]||""===m[a])return m[a]+a;var b=document.createElement("div"),c=["","Moz","Webkit","O","ms","Khtml"];for(var d in c)if("undefined"!=typeof b.style[c[d]+a])return m[a]=c[d],c[d]+a;return a.toLowerCase()},o=function(){var a=document.createElement("div");return a.style.cssText=l.join("filter:blur(2px); "),!!a.style.length&&(void 0===document.documentMode||document.documentMode>9)}(),p=!!document.createElement("canvas").getContext,q=a(window),r=function(){return"undefined"!=typeof Worker?!0:!1}(),t=(n("Filter"),[]),u=r&&f?new Worker(f+"BnWWorker.js"):!1,v=function(b){a(b.currentTarget).find(".BWfade").stop(!0,!0)[g?"fadeOut":"fadeIn"](j)},w=function(b){a(b.currentTarget).find(".BWfade").stop(!0,!0)[g?"fadeIn":"fadeOut"](i)},x=function(a){"function"==typeof b.onImageReady&&b.onImageReady(a)},y=function(){t.length&&(u.postMessage(t[0].imageData),u.onmessage=function(a){t[0].ctx.putImageData(a.data,0,0),x(t[0].img),t.splice(0,1),y()})},z=function(a,b,c,d){var h,e=b.getContext("2d"),g=0;e.drawImage(a,0,0,c,d);var i=e.getImageData(0,0,c,d),j=i.data,k=j.length;if(u)t.push({imageData:i,ctx:e,img:a});else{for(;k>g;g+=4)h=.3*j[g]+.59*j[g+1]+.11*j[g+2],j[g]=j[g+1]=j[g+2]=h;e.putImageData(i,0,0),x(a)}},A=function(b,c){var d=b[0],e=d.src,f=b.width(),h=b.height(),i={position:"absolute",top:0,left:0,display:g?"none":"block"};if(p&&!o){var j=d.width,k=d.height;a('').prependTo(c);var l=c.find("canvas");l.css(i),z(d,l[0],j,k)}else i[n("Filter")]="grayscale(100%)",a(" ').prependTo(c),a(".BWFilter").css(a.extend(i,{filter:"progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"})),x(d)};return this.init=function(){c.each(function(b,c){var d=a(c),e=d.find("img");e.width()?A(e,d):e.on("load",function(){A(e,d)})}),u&&y(),e&&(c.on("mouseleave",v),c.on("mouseenter",w)),h&&q.on("resize orientationchange",c.resizeImages)},this.resizeImages=function(){c.each(function(b,c){var d=a(c).find("img:not(.BWFilter)"),e=k?a(d).prop("width"):a(d).width(),f=k?a(d).prop("height"):a(d).height();a(this).find(".BWFilter, canvas").css({width:e,height:f})})},this.init(b)}})}(jQuery); \ No newline at end of file