Simple, but specfic question. I have a site which is using Pixastic to blur images. There are two images on a page which need to be blurred. This seems to work fine in IE (which I believe is using filters on the images) but doesn't work on other browsers (Firefox/Chrome). In those browsers it just effects the second image and the first is replaced by nothing - so I just get a rendered page with one blurry image on it instead of two.
I'm using the jQuery selector, by the way. The code I'm using is basically just this:
<head>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/pixastic.custom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.blur').pixastic('blurfast', {amount:0.2});
});
</script>
</head>
<body>
<img src="img/title1.png" title="" class="blur" />
<img src="img/title2.png" title="" class="blur" />
</body>
Does anyone know if it's possible to affect multiple images with Pixastic, and if so, how?
Thanks
As far as I can tell, what you have that should work.
Option 2. Try specifying a CSS class explicitly instead?
e.g. roughly something like:
<html>
<head>
<script type="text/javascript">
var pixastic_parseonload = true;
</script>
<script src="pixastic.core.js" type="text/javascript"></script>
<script src="invert.js" type="text/javascript"></script>
</head>
<body>
</style>
<img src="img/title1.png" title="" class="pixastic pixastic-blurfast(amount=0.2)" />
<img src="img/title2.png" title="" class="pixastic pixastic-blurfast(amount=0.2)" />
</body>
</html>