Question

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

i have bellow code to generate images from database.

<?php 
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

Answer 1

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"});