A repository of over 1000 quality jQuery plugins

jQuery jQuery_round_image

jQuery_round_image is a jQuery Rounded Edges plugin.

Created by Monobasic

jQuery Round Image

Not what you're looking for? Click here to view more Rounded Edges jQuery plugins

jQuery Round Image

This little plugin generates the popular clipped circle images (as example for avatar images) via javascript out of rectangle images. It works with replacement of the image with a SVG element and a clipping mask. The src attribute inside the svg provides backwards compatibility for some older browsers. (http://lynn.ru/examples/svg/en.html) - if you need more, it should be ease to add a modernizr check and render a standard img tag for unsupported browsers.

A way to use this is to add a class to all images on your site, that you want to replace and call the script like a normal jQuery method:

$(document).ready(function() {
    $('.img-rounded').roundImage();
});

Please note:

  • You need to include the width and height attributes for the image and they need to be consitent to the actual image size
  • Checkout the included example.html
  • Further chaining with other jQuery methods targets the svg element, not the original image


You might also like these other Rounded Edges jQuery Plugins

  • Round Progressbar

    round progress bar jquery

  • jQuery Rocking And Rol...

    We will create a menu with little icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu cont...

  • RoundHeight JS

    jQuery plugin for keeping the height of elements rounded up to a particular multiple.