1

My question is rather basic, but I can't find it out.

I have a quite big library of images to display in my website, so I've written a jQuery script to scan the folder, gather sources of images and put them as a background-image in the right place. That works perfectly.

My second step is to prepend a copy of an image above it and process it with Pixastic library. I tried with the code shown below:

function blurBackground() {
$wrapper2.prepend('<img class="blur" src="'+$sourceImage+'" />'); // great, a copy of the image is set!
    $('.blur').load(function() {    // execute on load
        $('.blur').pixastic("blur").css('border','10px solid red'); // failed to process with pixastic, succeded to edit css
    });
}

If I have an existing <img src="something.jpg" class="blur" /> in my markup everything works perfect, even if I strip the function down and use only that code:

function blurBackground() {
 $('.blur').pixastic("blur");
}

The problem is I cannot process any image which is prepended or appended.

I have no idea what I'm doing wrong. $sourceImage is 100% correct, and the image is always cached before the execution of the function.

Bartko Dębkowski
  • 15
  • 3
  • Do you mean its returning cached image, and you want to avoid caching? – Muhammad Usman Aug 26 '11 at 08:49
  • It's returning cached image. First function sets div's background-image using the var $sourceImage (which holds src of the image, of course :) ). If needed, the function blurBackground() is fired, and uses the same $sourceImage as existing image to set a copy above it and process it later. – Bartko Dębkowski Aug 26 '11 at 09:08
  • Can you please try this one before changing src, it will fool browser and force to avoid caching `d = new Date(); $sourceImage +='?'+d.getTime();` – Muhammad Usman Aug 26 '11 at 09:23
  • I don't get it - if I try to change variable $sourceImage, I'll not be able to show a copied image I want to process. – Bartko Dębkowski Aug 26 '11 at 11:21
  • I've checked and that's no matter if image is cached or nor - i tried to give another src instead of $sourceImage and it hasn't been processed as well. The problem is the image is prepended by the script - is there any chance to get it work? – Bartko Dębkowski Aug 26 '11 at 11:23

1 Answers1

0

It looks to me like you need to do this specify this image with the class .blur within the .load event handler.

$('.blur').load(function() {   
    $(this).pixastic("blur").css('border','10px solid red');
});
karim79
  • 339,989
  • 67
  • 413
  • 406