gianlucaguarini / jquery.blackandwhite Goto Github PK

Hey!

It's a great plugin, i tried a view b/w-mouseover scripts but couldn't get them running in my system. Yours worked out. =)

But I'm having an issue.
I'm having a menu with with pictures (using tabs > easytabs) - I'm using your plugin in there to create a nice hover effect. But I would need also the active one to be colored (>always not on hover)
Can you give me a hint how i could make that work?
I'm just learning jquery and i couldnt find a solution myself

my html structure is like that:

• >> here I'm having a class="active" if the tab is active

  So if li has the class "active" > I want the picture colored. The rest is colored when hover (which works out already perfectly)

  HOpe you can give me an idea!

  Thanks + great plugin!
  Karo

Hi and Thanks for you great plugin!

I'm using this plugin inside of my template but as you know for an optimized page (for increasing page load) we should give width and height attributes for the images and this causes IE8 not working.

How to fix this?

If replace lines 125-140 with:

                if (hoverEffect) {
                    $(currImageWrapper).stop().hover(function () {
                        if(!invertHoverEffect) {
                            $(this).find('canvas').stop(true).animate({opacity: 0}, 300);
                        } else {
                            $(this).find('canvas').stop(true).animate({opacity: 1}, 300);
                        }
                    }, function() {
                        if(!invertHoverEffect) {
                            $(this).find('canvas').animate({opacity: 1}, 300);
                        } else {
                            $(this).find('canvas').animate({opacity: 0}, 300);
                        }
                    });
                }

and lines 156-171 with:

                if (hoverEffect) {
                    $(currImageWrapper).stop().hover(function () {
                        if(!invertHoverEffect) {
                            $(this).children('.ieFix').stop(true).animate({opacity: 0}, 300);
                        } else {
                            $(this).children('.ieFix').stop(true).animate({opacity: 1}, 300);
                        }
                    }, function() {
                        if(!invertHoverEffect) {
                            $(this).children('.ieFix').animate({opacity: 1}, 300);
                        } else {
                            $(this).children('.ieFix').animate({opacity: 0}, 300);
                        }
                    });
                }

prevent repeat hover function.

Thanks!

I notice some offset or zooming effect when using the responsive mode, specially on IE
Do you how to fix that ?

Thanks

Hi

I'm loading the script on 2 domains that point to the same WordPress install. but it's throwing an error

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18

how can I fix this?

Hi Gianluca,

Is it possible to set the brightness of the bw image? Sometimes bw images could look nicer if they are brighter.

Kind regards,
Tomaz

Very helpful would be brightness configuration black & white image. Most often it should be less saturated (be lighter) than the original color image.

The demonstration page (http://www.gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/demo.html) does not work in Internet Explorer 9?

Chrome 25.0.1364.97 throws an error in line 72 of the .js file: Unable to get image data from the canvas because the canvas has been tainted by cross-origin data.

Hi,
last version of BlackAndWhite on updated Chrome can't load images.

Great script, but I'm trying to find a way to undo/disable the effect on a particular selector? For example: If I call the script using $('#my_id').BlackAndWhite({ hoverEffect: true });
is there a way to stop the effect and revert back to the original color image with something like $('#my_id').BlackAndWhite({ disable: true }); ?

I was able to "trick" the script by inverting the effect and forcing a 'mouseleave' trigger as in the following:
$('#my_id').BlackAndWhite({ invertHoverEffect: true });
$('#my_id').trigger('mouseleave');

The problem with this hack is that now, when I hover over the color image again, the b&w effect is still activated and not removed. Is there a better way?

Hello!

This plugin changes black and white images to colored versions with a smooth transitions but it also effects cursors.
I mean when we put an image inside of a tags the cursor changes to pointer with a delay, How we can fix it to change at once?

Apparently due to a Firefox bug (https://bugzilla.mozilla.org/show_bug.cgi?id=574330), the canvas rendering throws a "NS_ERROR_NOT_AVAILABLE" error and fails to process.

Any chance of implementing a workaround?

Hi,

I'm having issues with the canvas grayscale image. I'm not able to align both images... I'm not an expert with css and maybe that is the problem.. but just in case, can you take a quick look?
http://www.nelsondaires.com/journal/testar/

Thanks,
nelson

When load by ajax, it duplicates all the images and the hover doesn't work fine.
I've forked and fixed this by changing the data() method for the hasClass() method to check if an image already has the black&white applied.

Hello, thank you for your plugin!

I try your plugin with google fonts, but image preloading don't work:
http://test.mo.cz/test-bw/ Please where is the problem?
When I delete font-family the plugin works ecellent.

Thank you, thank you, thank you

hey!

sorry, another issue.
How can I increase the contrast in the created b/w picture?

Thanks
Karo

Great piece of code :)

I made a little change that I think might be useful to add to the plugin. Sometimes you simply don't want to desaturate the image completely.

Assuming intensity is a plugin variable:

for (; i < length; i += 4) {
     var k = px[i] * 0.3 + px[i + 1] * 0.59 + px[i + 2] * 0.11;
     px[i] = Math.floor(k * intensity + px[i] * (1 - intensity));
     px[i + 1] = Math.floor(k * intensity + px[i+1] * (1 - intensity));
     px[i + 2] = Math.floor(k * intensity + px[i+2] * (1 - intensity));
}

Hi there,

I'm using this plugin on www.thebitterbar.com, on the main images on the left. I named my wrapper "bw."

As you can see in Chrome, it hits this strange JS error:

Uncaught TypeError: Object [object Object] has no method 'prop' jquery.blackandwhite.js:12
(anonymous function) jquery.blackandwhite.js:12
d.extend.each jquery.min.js:16
d.fn.d.each jquery.min.js:16
init jquery.blackandwhite.js:12
a.fn.extend.BlackAndWhite jquery.blackandwhite.js:12
(anonymous function) global.js:102
d.event.handle jquery.min.js:16
k.handle.m jquery.min.js:16

Any idea how to resolve?

It's also hitting on this page, where the images are not in a slideshow, so it seems this is a bug occurring no matter what:
http://thebitterbar.com/private-parties/

Here's my script call, as you can see I pulled it directly from your examples:

$(window).load(function(){ // fire on window load event which is different (and more accurate) than document.ready

  $('.bw').BlackAndWhite({
      hoverEffect : true, // default true
      // set the path to BnWWorker.js for a superfast implementation
      webworkerPath : false,
      // for the images with a fluid width and height 
      responsive:true,
      speed: { //this property could also be just speed: value for both fadeIn and fadeOut
          fadeIn: 200, // 200ms for fadeIn animations
          fadeOut: 800 // 800ms for fadeOut animations
      }
  });

});

Hi,
At first, thanks for this usefull plugin!

Since version 0.3.4 I am having problems with disappeared links. When hoovering cursor doesn't change to hand neither there is any advice that image is placed within a href tag.

My html is common:

                <div class="quicklinks-wrapper">                        
                    <ul>
                            <li class="bwWrapper"><a href="/link1"><img src="/files/ouorw0wl63.nrjo3rwpnk.quick-link-1r.png" title="link1" alt="link1" class=""></a>
                            </li>
                            <li class="bwWrapper"><a href="/link2"><img src="/files/0xubeb5ukr.quick-link-2.png" title="link2" alt="link2" class=""></a>
                            </li>
                            <li class="bwWrapper"><a href="/link3"><img src="/files/pphxprmy1r.quick-link-3.png" title="link3" alt="link3" class=""></a>
                            </li>
                    </ul>
                </div>

Switching back to ver. 0.2.8 all links are again active work.

The only difference I see in generated code is attribute crossorigin="anonymous" added to img tag in new versions of BlackAndWhite.

Thanks!

Seems script doesn't work in IE8 and lower.

Hello,

I use your plugin on a website I’ve made this is several years. It works very well. Thanks !

I’m working on this website to update the template and i see that your plugin is no more compatible with jquery 1.11.3

On your demo, you use jQuery 1.8.1

If i use jquery 1.11, i have this error in console :

TypeError: $.browser is undefined

I think the .browser call has been removed in jquery 1.9

Could you update the plugin ?

Thank you.

Hello how are you? I'm William and I have 22 years ... I have a big problem I can not make it work I'm building my portfolio and I would like this function would look like.

Review the implementation and yet I can not make it work, could give me a push.

This is the site http://designemergency.com.mx/trabajo.html

Thanks guys

Hi,I was trying to apply this to my website, but i have two questions:

1. is there a way to set 80% greyscale?
2. Is there anyway to use this plugin on div 'background-image' instead of img tag?

Thanks.

I use jQuery.BlackAndWhite in monaamiri.com for product view but it does not work correctly in chrome.

There are products in diffrent categories and i don't know how to set 'webworkerPath'
for example in this page
http://monaamiri.com/Product/Women/Necklace.aspx
it look for http://monaamiri.com/Product/Women/js/BnWWorker.js
Thanks for your response

ok issue solved

Hey! I love your plugin, but it simply doesn't work with Opera (currently using v11.52).

Here is the result of the plugin in chrome http://joxi.ru/fBYLVP3JTJCmBuz-QF4

Thanks for a great plugin!

I'm having an issue with the quality of the greyscale image that can be seen at http://www.fibreking.com/ (the 4 badges under the slideshow). Can you suggest what the problem is?

Apologies for posting here and your blog - I couldn't delete the blog comment.

Thanks

Hi,

Ok not an issue, more of a request.

I have a div and when hovered i would like the image inside of it to change from black and white to colour when the div is hovered.

Could you add such a feature, as that would be just great!

Good job on the plugin btw ;)

Desaturated images in opera ( win 8) become blurry.

I've came across this experiment that works correctly, in opera, I'll investigate it further when I have the time.

http://dev.artutkin.ru/desaturate/example.html

Hi!

Sorry for the bad English. Plugin not work well in IE 7 and IE 8, the effect of the transition to shades of gray only appears when you hover for a very short time. All the rest of the original image is displayed without the use of filters. The same effect is observed on the demo page - http://gianlucaguarini.github.io/jQuery.BlackAndWhite/

IE mode of in IE 8 may be a developer console F12.

Perhaps there's some error in the way I set this up but I was working with the demo (which doesn't load the images in chrome for some reason), but my own version loads there.
The images are different sizes. For Safari, it doesn't even change it to black and white at, just places a duplicate next to it.

Here's the generated code for Chrome. It's generating an extra height and width.

<a href="#" class="bwWrapper" style="opacity: 1;">
<img src="http://localhost/gallery/albums/crap/header.jpg" width="100" height="300" class="BWFilter BWfade" style="position: absolute; top: 0px; left: 0px; display: block; width: 55px; height: 66px; -webkit-filter: grayscale(100%);">
<img src="http://localhost/gallery/albums/crap/header.jpg" class="b" alt="header.jpg" title="header.jpg" width="100" height="300">
</a>

This is the way it looks on Chrome.

On Safari:

I hope that makes sense.

Hi there. Am using this plugin on the following demo site:

http://www.onceupononline.com

As you can see there is a delay which reveals the coloured images on window load. I see that pre-loading was added as of version 0.2.6 but cannot find any examples of how to implement this? Any help would be great

Many thanks for the great plugin!

Hi, maybe it's not an issue, more like request, is there any chance to preload images when it have to be gray?
I mean, when u got more images at page, there is one-two second queue between script start to work and it can be seen that images are changing color from colored to gray. Is there any chance to hide that by preload images somehow?

U can see this in most examples, also in demo, but there is quite fast change, if u got more images at page or bigger page it last longer.

thanks in advance

I have implemented the plugin and works perfectly. However, for the new set of images that will be loaded using infinite scrolling method, will not "initialize" or have that rollover effect. Is there a reinitialization parameter or is there a way to "reboot" the plugin?

I saw your ajax example. Would have been a perfect example that can be used for infinite scrolling. However, everytime you fire up the plugin, the previous initialize doubles.

TO make better sense of what is happening, do an inspect element of one of the images. By right when the plugin starts, there are 2 images in a container. One for black and white and the other the full color. When you reinitialize the plugin, the images becomes four in a container

Hello, I have some issues with the plugin. The BW wrapper image only displays the filename. In Firefox none of the images is displaying

See what I mean here: http://www.selanderax.se/projekt/

It works fine on the homepage, but other pages which I load inline with Ajax don't trigger the script.
Any tips?

Hi, I've got this running great, except that after 20 images it doesn't seem to create black and white canvases in Firefox. It works fine in Safari and Chrome. It still creates a colour canvas in Firefox, so I'm wondering what could be going wrong!

Heya,

first of all.. awesome plugin. I have just one simple issue which i can't fix somehow. I have a list with 30 images (160x160px) that are all the same size. But before these images appear i have one image which is bigger in size (300x300px). The plugin works fine in firefox but in chrome, explorer and safari the bigger image gets a grayscale version with the size 160x160px. If you can fix this, that would be awesome.

Thanks in advance.

Cheers

It would be good if we can have a custom callback function after each image has been processed.

Then we could use CSS to make images invisible and once BlackAndWhite is initialized we make images visible. By doing that, we can prevent colorful image from showing before initialization.

Hi there

I'm guessing this doesn't work when loading images and js via a CDN?

Hi !

How to run this plugin with Lazy Load Plugin http://www.appelsiini.net/projects/lazyload/enabled_noscript.html ?

Because the problem is that these images are not loading after desaturated...

Thank you !

Hi

Just noticed when updating to the latest firefox that the black and white filter wont work. Reading the firefox release notes they have enabled filters by default but cant see exactly whats causing it.

Cheers!

Would it be possible to add a sepia effect? Or a more generic "color-scheme" approach, whereby you can set a "theme" which is then used when converting the image. Like sepia will be sepia colors, but "navy" would be shades of dark blue and "ember" would be shades of red?

Like the title says, my images are black and white after adding the jquery code but don't become color when the mouse hovers over them. This is my site;

http://storyville.jonmarkoff.com/storyvillewp/our-work/

Thanks!

What a great plugin, thanks for writing and maintaining it!

I'm trying to use it with a Cycle2 carousel.

With this code block every other image should be B&W but none are:

<div class="cycle-slideshow"
    data-cycle-fx="carousel"
    data-cycle-timeout="0"
    data-cycle-slides="> a"
    data-cycle-carousel-visible="3"
    >
  <a href="#" class="bwWrapper"><img src="/assets/images/img01.jpg" height="200" alt="test image"></a>
  <a href="#"><img src="/assets/images/img02.jpg" height="200" alt="test image"></a>
  <a href="#" class="bwWrapper"><img src="/assets/images/img03.jpg" height="200" alt="test image"></a>
  <a href="#"><img src="/assets/images/img04.jpg" height="200" alt="test image"></a>
  <a href="#" class="bwWrapper"><img src="/assets/images/img05.jpg" height="200" alt="test image"></a>
</div>

With this code block, the images are set to black and white, as expected.

This is my script block:

<script>
 $(window).load(function() {
    $('#slideshow').cycle({
        fx: 'carousel',
        speed: '1000', 
        slides: '> a',
        next: '#next',
        prev: '#prev'
    });

   $('.bwWrapper').BlackAndWhite({
         hoverEffect: false,
         invertHoverEffect: false
     });
  });
</script>