pixelgirrrl pixelgirrrl - 3 months ago 22
jQuery Question

JS Ripple effect to IMG not to background

I am trying ot alter jquery.ripples (https://github.com/sirxemic/jquery.ripples/) to use the ripple effect on an image itself, not the background. I've tried numerous things to no avail. Any guidance, or advice for another method would be greatly appreciated!

Answer

This plugin doesn't support images, so you have two options:

  1. Wait for author to add that functionality (or someone else, who fork this project), or
  2. Make a shortcut - for each image you want to use this effect, you need to create div on the top (position:absolute, z-index:10; width and height equal to dimensions of image) and copy image's src and set it as div's background. Then u can use this effect like in example.

Little example:

$(window).load(function() {
  $('img.ripples-image').each(function() {
    $image = $(this);
    $image.wrap('<div class="ripples-wrapper"></div>').after('<div class="ripples-img" style="background-image:url(\''+ $image.attr('src') +'\')"></div>');
  });
  
  // Set effect
  $('.ripples-img').ripples();
});
.ripples-wrapper{
  position:relative;
  display: inline-block; 
}
.ripples-wrapper img{
  display:block;
  visibility:hidden; /* Hidden, but keep place */
}
.ripples-img{
  position:absolute;
  display:inline-block;
  width:100%;
  height:100%;
  z-index:10;
  top:0;
  left:0;
  background-repeat:no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.4.2/jquery.ripples.js"></script>

<img class="ripples-image" src="http://bloximages.newyork1.vip.townnews.com/wisconsin.golf/content/tncms/assets/v3/editorial/1/23/1233a6ba-d0d8-11e5-9a3c-fbcece8553f7/56bcafd946c28.image.jpg?resize=400%2C400" alt="StackOverflow logo" />