0
How to change the image in the effect Water-Ripple-, when it changes the effect goes away, the photo it comes from, this pulled from the internet:
<div class="a ripples" style="background-image:url(http://placekitten.com/800/500)">
when I change the image to pull one from my pc the effect goes away;
I have the following code.
<!DOCTYPE html>
<!-- saved from url=(0082)http://www.jqueryscript.net/demo/jQuery-Plugin-For-Water-Ripple-Animation-ripples/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>jQuery ripples plugin demos</title>
<link href="./jQuery ripples plugin demos_files/jquerysctipttop.css" rel="stylesheet" type="text/css">
<style>
body { margin: 0; }
div {
position: fixed;
font-family: "Helvetica Neue","Helvetica","Arial",sans-serif;
}
.a {
left: 0;
top: 0;
right: 51%;
bottom: 51%;
background-size: cover;
}
.b {
left: 51%;
top: 25.5%;
right: 0;
bottom: 25.5%;
background-attachment: fixed;
}
.c {
left: 0;
top: 51%;
right: 51%;
bottom: 0;
background-size: cover;
}
.error {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.8);
color: #eee;
padding: 20px;
display: none;
}
</style>
</head>
<body >
<div class="jquery-script-clear"></div>
</div>
</div>
<div class="a ripples" style="background-image:url(http://placekitten.com/800/500)">
</div>
<div class="error"></div>
<script src="jquery.min.js"></script>
<script src="jquery.ripples.js"></script>
<script>
$(document).ready(function() {
try {
$('.a,.b,.c').ripples({
resolution: 256,
perturbance: 0.04
});
}
catch (e) {
$('.error').show().text(e);
}
});
</script>
</body></html>
Try to describe the problem better and format the code; who knows so someone can help
– Lucas
So I do not know if I left strange the question, I would just like to put in the example of the Water-Ripple effect, another image replace with one of mine, when I replace the image the effect does not catch but, it just picks up with the address that is : <div class="a ripples" style="background-image:url(http://placekitten.com/800/500)">
– user10323
this effect is only working on Firefox on IE and Chrome does not work
– user10323
From what I’ve observed, you saved it like a web page containing that code. Try renaming the directory of the files because they contain spaces and some browsers this can give some conflict. Because as you said the code works on firefox and IE, might be giving Chrome conflict because of the name of the folders. Inspect element on your page, and go to the console tab and see if javascript is returning any errors.
– Samuel Carvalho
I’m pulling all the codes from my computer, I’m posting his JS for you to take a look at SAMUEL, I appreciate the attention
– user10323
no Chrome da pra vc download essa pagina ai vem com js dela http://www.jqueryscript.net/demo/jQuery-Plugin-For-Water-Ripple-Animation-ripples/ save as:
– user10323