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

  • Sektor

    :round_pushpin: A slim alternative to jQuery's Sizzle

  • jQuery Wheelcolorpicker

    A jQuery plugin to add color picker functionality to HTML form inputs in round color wheel style.

  • jQuery Rounded Div

    Create beautiful rounded divs using jquery which is compatible with all the browsers