Creating Circular Images with jQuery and SVG - Round Image
File Size: | 2.64 KB |
---|---|
Views Total: | 7051 |
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.