Creating Circular Images with jQuery and SVG - Round Image
| File Size: | 2.64 KB |
|---|---|
| Views Total: | 7141 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Round Image is a super tiny jQuery plugin to generate Google+ profile image-like circular images with just one JS call. The plugin makes use of SVG clippath to cut off the edges of a rectangle image to make it rounded. No any CSS needed.
How to use it:
1. Insert a local or external image into your html page.
<img class="img-round" src="1.jpg" alt="">
2. Add the jQuery library and the jQuery round image into your page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.roundimage.js"></script>
3. Call the plugin on the image and we're done.
$(document).ready(function() {
$('.img-round').roundImage();
});
This awesome jQuery plugin is developed by monobasic. For more Advanced Usages, please check the demo page or visit the official website.











