How to revert the pixastic effect?

Question

<script type="text/javascript">
$(function() { 
jQuery(".attachment-thumbnail")
.pixastic("desaturate")
.pixastic("sepia")
});
</script>

I got this pixastic script working, now I need to revert the effects on rollover. I don't really know how to do that though. The link is here if you want to take a look, http://mentor.com.tr/wp/?page_id=218

Eric Fortis · Accepted Answer · 2011-07-16T16:22:10.850

4

jQuery(".attachment-thumbnail").live({
  mouseenter: function() {       
     Pixastic.revert(this);

  },
  mouseleave: function() {
    jQuery(this).pixastic("desaturate");
  }
});

Note that sepia won't do anything combined with desaturate

The plugin is not very well documented, so in the future I suggest taking a look into the source code, in this example line 403 shows

revert : function(img) {

edited Jul 16 '11 at 16:22

answered Jul 16 '11 at 05:48

Eric Fortis

16,372
6
41
62

I thought I needed a .mouseout function? It didn't work for me. – Talha Jul 16 '11 at 13:43
I guess I wasn't clear enough. They should be desaturated by default and when user hovers over them they revert, i mean they gain saturation back again. But this happens only when the cursor is on the images. – Talha Jul 16 '11 at 16:49
@Talha do you mean to saturate them, and they shouldn't go back to desaturation? in that case just remove `, mouseleave: function() {..}` – Eric Fortis Jul 16 '11 at 16:52
@Talha BTW in this website you should show your prior attempts and not expect people to do work for you, just help. – Eric Fortis Jul 16 '11 at 17:00
No, right now it's doing exactly opposite of what I was aiming. Initially the images has to be desaturated by pixastic. And when I hover over an image that image has to be saturated and when rollout they should go back to their desaturated state. – Talha Jul 16 '11 at 17:00
@Talha you have removed your original code. keep it, add mine below – Eric Fortis Jul 16 '11 at 17:02
d'oh! Thanks. I'll vote-up your answer once I've enough reputation. thanks again.. – Talha Jul 16 '11 at 17:14

score 0 · Answer 2 · answered Dec 26 '12 at 09:52

$(window).load(function () {
    $(".thumb").pixastic('desaturate');
    $(".thumb").live({
        mouseenter: function() {
            Pixastic.revert(this);

        },
        mouseleave: function() {
            $(this).pixastic("desaturate");
        }
    });
})

score 0 · Answer 3 · edited Feb 07 '14 at 15:26

Hi guys everything said above works great if you're directly setting hover events on the image. Whereas in my situation I wanted the the image to blur if I hover on the image container (which contains other divs too, not just the image).

Here is my code in case anyone else is dealing with something similar:

$(function () {

    $('.col1.w1').mouseenter(function () {

        var origImg = ($(this).find('.imageUrl'));
        if (origImg.is('img')) {
            Pixastic.process(origImg[0], 'blurfast', { amount: 2 });
        }

    });
    $('.col1.w1').mouseout(function () {
        var origImg = ($(this).find('.imageUrl'));
        Pixastic.revert($(this).find('.imageUrl')[0]);

    });
});

How to revert the pixastic effect?

3 Answers3