To insert code use <code>...</code>.
HTML5 Image Hover Effect (Black and White -> Color)
  • Vote Up1Vote Down hudohudo
    Hi Kaptinlin.

    I found what I think is a great addition for Striking. The ability to change the image when you hover from BW to color.

    The code is this:

    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

    // On window load. This waits until images have loaded which is essential
    $(window).load(function(){

    // Fade in images so there isn't a color "pop" document load and then on window load
    $(".item img").fadeIn(500);

    // clone image
    $('.item img').each(function(){
    var el = $(this);
    el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
    var el = $(this);
    el.parent().css({"width":this.width,"height":this.height});
    el.dequeue();
    });
    this.src = grayscale(this.src);
    });

    // Fade image
    $('.item img').mouseover(function(){
    $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
    })
    $('.img_grayscale').mouseout(function(){
    $(this).stop().animate({opacity:0}, 1000);
    });
    });

    // Grayscale w canvas method
    function grayscale(src){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var imgObj = new Image();
    imgObj.src = src;
    canvas.width = imgObj.width;
    canvas.height = imgObj.height;
    ctx.drawImage(imgObj, 0, 0);
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for(var y = 0; y < imgPixels.height; y++){
    for(var x = 0; x < imgPixels.width; x++){
    var i = (y * 4) * imgPixels.width + x * 4;
    var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
    imgPixels.data[i] = avg;
    imgPixels.data[i + 1] = avg;
    imgPixels.data[i + 2] = avg;
    }
    }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
    }

    </script>

    Demo of what it can do is here: http://webdesignerwall.com/demo/html5-grayscale/
    Source of the code: http://webdesignerwall.com/tutorials/html5-grayscale-image-hover

    I hope you consider including this in Striking.

    Or give some guidance on how we can use it. I know jquery is already shipped with striking.

    BR,
    hudo
  • 10 Comments sorted by
  • Vote Up0Vote Down KaptinLinKaptinLin
    Hi hudo,

    It looks great! I wonder to know which element do you want to add this effect?

    Portfolio , gallery shortcode or image shortcode?

    Regards,
    KaptinLin
  • Vote Up0Vote Down michalmichal
    It would be nice to be able to use it on any picture you want, in portfolio, gallery, etc.
  • Vote Up0Vote Down hudohudo
    Hi Kaptinlin.

    It would be nice if we had the chance to choose any of them. For instance, it could be placed in the Striking > Media menu with on/off selectors for all of them.

    Something like:

    BW to Color effect menu

    Portfolio - on/off
    Gallery shortcode - on/off
    Image shortcode - on/off
    Image (the normal img or image tag from wordpress) - on/off
    ...
    ...
    and so on to all the elements that can work with this kind of effect.

    Thanks for looking into this. I believe this would be another great addition to Striking, an already amazing theme.

    BR,

    hudo
  • Vote Up0Vote Down bleckettbleckett
    Not sure if possible, but how about an image shortcode parameter like bw? That would be great, too!

    [image bw='true' icon="zoom" lightbox="true" width="218" height="429" title=""]

    On a side note, it would be nice to have a (clean) parameter that doesn't draw the boarder, bottom shadow, or grey background when loading. Just a thought...

    [image clean='true' icon="zoom"

    PS: Nice example!
    PSS: Love this theme!!
  • Vote Up0Vote Down hudohudo
    Hi Kaptinlin,

    Any news on this? Is it planned?

    Keep up the great work!

    Cris
  • Vote Up0Vote Down KaptinLinKaptinLin
    Hi Cris,

    You will see it in the next release of striking.

    Regards,
    KaptinLin
  • Vote Up0Vote Down hudohudo
    You're the man!

    BTW, bleckett's idea is great.

    Thank you!
  • Vote Up0Vote Down KaptinLinKaptinLin
    All elements can works excerpt gallery.

    Yes, bleckett's idea is great! You may see that too in next release.
  • Vote Up0Vote Down hudohudo
    Again, thanks Kaptinlin.

    Cris
  • Vote Up0Vote Down GonzuSGonzuS
    Nice idea, great work!
    thx hudo and KaptinLin
This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Categories

In this Discussion