my image all show in color! it support to be hover to be cover and all in greyscale

alvin chin
asked 11 years ago

is it jquery problem my page got such problem and it have console below
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught SecurityError: An attempt was made to break through the security policy of the user agent.

3 Answers

DominicStaff
answered 11 years ago

Hello Alvin !
Please send me username & password of your site (via private answer) for further checking.
Regards,

Wilfred
answered 11 years ago

Hi Alvin,
I have helped you resolve the bugs that you faced. Please check and enjoy.
Your site looks impressive, do you mind submitting your site to us? So we can showcase your site to the community here 🙂 Here is the link: http://bit.ly/submit-site
Highly appreciate if you would do so.
Thanks

alvin chin
replied 11 years ago

wilfred,

my 1st check of the web is the color problem is done, but my drop down menu is missing ! may i know what bug you are fix ? can i know how you do it ?

Wilfred
answered 11 years ago

Hi Alvin,
This is step by step i did to resolve grayscale bug on your website:
1. Open file script.js file in wp-content/themes/theme/inc/assets/js
2. Replace following code form line 120 to line 127

   $('.team .personal').hover(
 function(){
 $(this).find('.img_wrapper .img_grayscale').stop().animate({opacity:1},200);
 },function(){
 $(this).find('.img_wrapper .img_grayscale').stop().animate({opacity:0},200);
 }
 )

with:

   // $('.team .personal').hover(
 // function(){
 // $(this).find('.img_wrapper .img_grayscale').stop().animate({opacity:1},200);
 // },function(){
 // $(this).find('.img_wrapper .img_grayscale').stop().animate({opacity:0},200);
 // }
 // )

3, Open framework.php file in wp-content/themes/theme/inc
4. Replace following code – line 81

   wp_enqueue_script('dw_page_script', DW_PAGE_URI.'inc/assets/js/script.js', array('jquery','dw-page-grayscale'));

with:

   wp_enqueue_script('dw_page_script', DW_PAGE_URI.'inc/assets/js/script.js', array('jquery'));

5. Replace following code – line 79

   wp_enqueue_script('dw-page-grayscale', DW_PAGE_URI . 'inc/assets/js/jquery.grayscale.js');

with:

   // wp_enqueue_script('dw-page-grayscale', DW_PAGE_URI . 'inc/assets/js/jquery.grayscale.js');

6. Add following code to style.css file in wp-content/themes/theme

   .thumbnail 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;
 -webkit-filter: grayscale(100%); 
 -webkit-transition: all .6s ease;
 -webkit-backface-visibility: hidden;
}
.thumbnail:hover img {
 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");
 -webkit-filter: grayscale(0%);
}