jQuery Plugin To Create Customizable Image Watermark - watermarker
File Size: | 584 KB |
---|---|
Views Total: | 9420 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
watermarker is a small jQuery plugin that generates a customizable and draggable watermark on your images.
How to use it:
1. Include jQuery javscript library on your web page directly from a CDN.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Include the jQuery watermarker javascript and CSS files in the page, after jQuery library.
<link rel="stylesheet" href="watermarker.css" type="text/css"> <script src="watermarker.js" type="text/javascript"></script>
3. Insert your image in an DIV container with a CSS class.
<div class= "image" style="width:800; height:600;" > <img src="images/picture.jpg" id="image" style="width:100%;height:100%;" > </div>
4. Call the plugin on the container.
<script type="text/javascript"> $(function() { $('.image').watermarker(); }); </script>
5. Customize your image watermark.
<script type="text/javascript"> $(function() { $('.image').watermarker({ onChange: function(){}, onInitialize: function(){}, imagePath: "images/watermark.png", containerClass: "watermarker-wrapper", watermarkerClass: "watermarker-container", watermarkImageClass: "watermarker-image", resizerClass: "resizer", draggingClass: "dragging", resizingClass: "resizing", offsetLeft: 0, offsetTop: 0, aspectRatio: undefined, }); }); </script>
Change logs:
2016-01-11
- add onChange on resize event
2015-03-06
- bugfix
2015-02-26
- bugfix
2014-12-30
- fix para calcular la opacidad
2014-12-24
- bugfix
2014-12-22
- add destroy and remove methods
2014-12-17
- add an ablitly to send more than one item to watermarker
This awesome jQuery plugin is developed by NicoDerecho. For more Advanced Usages, please check the demo page or visit the official website.