Search code examples
jqueryajaxlive

Live HTML5 grayscale

I need to use this script for a website gallery: http://webdesignerwall.com/tutorials/html5-grayscale-image-hover/

This works great for images already loaded:

   $(window).load(function(){
                $('.item img').each(function(){
        this.src = grayscale(this.src);
        });
    });
function grayscale(src){ //blabla };

The problem is that I load next images with ajax, and the effect is not applied to new ajax elements.

Thank you!

If I load my function on success, the effect will overwrite the existent grayed images!

Solution

  • call that method on success callback of the AJAX:

    function foo(){
    $('.item img').each(function(){
    this.src = grayscale(this.src);
    });
}

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: foo,
  dataType: dataType
});