Add Download Button To Image With JavaScript - add-download-btn.js
File Size: | 120 KB |
---|---|
Views Total: | 24686 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
add-download-btn.js is a small and easy-to-use jQuery plugin that creates a custom button on your image to force the browser to download the image file on click.
How to use it:
1. Download and put the add-download-btn.js
after the latest jQuery library (slim build).
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="add-download-btn.js"></script>
2. Call the function on the img
tag and specify the text and classname of the download button.
<img src="example.jpg">
var text = "DOWNLOAD"; var className = "btn"; $("img").addDownloadBtn(text, className);
3. Customize the image download button using your own CSS rules as these:
.btn { padding: 5px 10px; font-size: 16px; border-radius: 3px; border: solid 1px #C0392B; background-color: #E74C3C; text-decoration: none; color: white; } .btn:hover { opacity: .9; } .btn:active { opacity: 1; }
This awesome jQuery plugin is developed by theuves. For more Advanced Usages, please check the demo page or visit the official website.