0

I am trying to cycle my image and blur the background image but the problem is it only blurs the first image but not the next image.

<div id="banner_images">        
    <div id="banner_cycle_wrapper">
        <div id="banner_bg_cycle">
            <img src="source.png" class="blur">
        </div>
        <div id="banner_cycle_container">
            <img src="source.png">
        </div>
    </div>
    <div id="banner_cycle_wrapper" >
        <div id="banner_bg_cycle">
            <img alt="" src="source.png" class="blur">
        </div>
        <div id="banner_cycle_container">
            <img src="source.png">
        </div>
    </div>
</div>

$('#banner_images').cycle({
    fx: 'fade',
    timeout: 2000
});

$(".blur").pixastic("blurfast", {amount:0.5});
Mohammad
  • 21,175
  • 15
  • 55
  • 84
Yuusha
  • 175
  • 1
  • 3
  • 10

1 Answers1

0

I think you are missing CLASS to add in that

 class="blur"

this should be added to each image you want to have the same effect.

Updated Code:

<div id="banner_images"> 
   <div id="banner_cycle_wrapper"> 
      <div id="banner_bg_cycle"> 
         <img alt="" src="source.png"/> 
      </div> 
      <div id="banner_cycle_container"> 
         <img alt="" src="img1.png" class="blur" /> 
         <img alt="" src="img2.png" class="blur" /> 
      </div> 
   </div> 
 </div>

I hope this will help :)

MarmiK
  • 5,639
  • 6
  • 40
  • 49