Why is this watermark plugin not working?
Question
Why is this jquery image watermarking plugin not working? I am using the code from the official plugin website.. from here When i see the source code of the demo website they have used js/jquery-watermarker-0.3.js. but i cannot find this plugin online anywhere? how come this works for them in the demo. Please help.
<html>
<head>
<script type="text/javascript" src="js/jquery.js">
<script type="text/javascript" src="js/jquery-1.4.2.min.js">
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
<script type="text/javascript" src="js/jquery-watermarker-0.2.js">
<script type="text/javascript">
$().ready(function(){
$('#watermarked').Watermarker({
watermark_img: "a.png",
onChange: showCoords
});
});
function showCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
</script>
<style type="text/css">
div.watermark
{
border:1px dashed #000;
}
img.watermark:hover{
cursor:move;
}
</style>
</head>
<body>
<img src="1.jpg" id="watermarked" />
<form method="post" action="phpScriptToMergeBothImage.php">
<input type="text" id="x" name="x" value="" />
<input type="text" id="y" name="y" value="" />
<input type="text" id="w" name="w" value="" />
<input type="text" id="h" name="h" value="" />
<input type="submit" name="save" value="Ok >" />
</form>
</body>
</html>
3 answers
solution1
2 ACCPTED 2011-11-01 00:51:23
Make sure you've downloaded the plugin from the site ( here ) and included the scripts in your file. In the code you supplied above, it looks like you should have a folder called 'js' that contains 'jquery.js', 'jquery-1.4.2.min.js', 'jquery-ui-1.8.6.custom.min.js' and 'jquery-watermarker-0.2.js'. If this is true, the plug-in is loaded.
Next, make sure that you also have the images '1.jpg' and 'a.png' in your root folder, where '1.jpg' is the background image and 'a.png' is the image you want the watermark to be. If they don't have those names, change the names in the plug-in code to match the name of the images that you're working with.
solution2
1 2011-11-01 01:55:56
Your first line should either be $(function) or $(document).ready(function) :
$(document).ready(function(){
$('#watermarked').Watermarker({
watermark_img: "a.png",
onChange: showCoords
});
});
$() Used to return a jQuery collection containing document in 1.3.x but this was changed in 1.4 to return an empty collection.
Also, your script tags need to be closed </script>
solution3
0 2012-04-17 19:52:34
A nice watermark plugin can be found here .
Simply call it using the following:
<script type="text/javascript">
$(document).ready(function () {
$("#textbox1").WaterMark({
waterMarkText: "Watermark text"
});
});
</script>
<input type="text" id="textbox1" name="textbox1" />
There is also an example for use with textareas there too.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.