Hi,
I’m using the quite exceptionally used grayscale.js javascript library, which has the power to change entire web elements into grayscale. More info on this javascript plugin can be found here:
[url]http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/
I’ve got it to work on document ready (jquery call), the script is activated on wordpress generated thumbnails. This works excellent in all browsers [B]except
The problem with safari seems to be that it does not load the images correctly before greyscaling them. After hovering them, the (color) images are loaded, and then when removing your mouse it grayscales like it should on page load. For all clearness, i’m using the following script:
[CODE]jQuery(document).ready(function() {
grayscale( jQuery(‘.portfolioimg’) );
jQuery(‘.portfolioimg’).hover(function() {
grayscale.reset( jQuery(this) );
}, function() {
grayscale( jQuery(this) );
});
});
in my <head> section. Note that i’m using a jQuery noconflict solution because wordpress uses scripts that conflict with $.
I have no idea why safari treats the script differently than all other browsers, firefox, IE, chrome, it all works fine!
Anyone any idea how i can make it work? Example here:
[url]http://tinyurl.com/66xc8vv
Please don’t mind the messy html structure