make image corner round with jquery

i am using jquery.imgr.js to make image corner round in php file.

i have bellow code to generate images from database.

<?php 开发者_JS百科
for($i=1;$i<=5;$i++)
{
?>
<img id="hero" src="art/<?=$getArtistsId[$i];?>"  height="75px" width="98px"/>
<?php
}
?>

bellow is script to make image corner round

  <script type="text/javascript">
    $(document).ready(function(){
    $("#hero").imgr({size:"2px",radius:"10px"});
    })
    </script>

it works but only make the first image corner round not all.

1. how to make all image corners round?
2. is there any other batter and efficient way to make image round corners.

Thanks

An ID is unique, you are setting an ID for many elements so of course when you set the imgr script to run on the element with that ID it will only match one. Classes can be used on many elements. So instead of:

<img id="hero" src="art/<?=$getArtistsId[$i];?>"  height="75px" width="98px"/>

Use:

<img class="hero" src="art/<?=$getArtistsId[$i];?>"  height="75px" width="98px"/>

And then for the javascript use the class selector which is similar to CSS:

$(".hero").imgr({size:"2px",radius:"10px"});

Instead of adding and id in your loop, add a common class.

<img class="hero" src="art/<?=$getArtistsId[$i];?>" height="75px" width="98px"/>

$(".hero").imgr({size:"2px",radius:"10px"});

After adding a class, why not just?...

.hero img{
    border-radius: 10px;
}