Rounded Plugin V1.1

Este plugin tem como finalidade arredondar as bordas de imagens.

Para utilizar este plugin você precisa ter a jQuery instanciada, juntamente com o plugin metadata.

Para download você pode baixar a última versão rounded.js.

Este código foi inspirado no corner.js do Christian Effenberger.

Instanciando

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="plugin/metadata.js"></script>
<script type="text/javascript" src="plugin/rounded.js"></script>

Basta incluir os arquivos normalmente no html que pretende utilizar o plugin.

HTML

<img src="img/rounded.jpg" width="342" height="92" class="{size:20}" />
ou
<img src="img/rounded.jpg" width="342" height="92" />

Adicionamos uma tag img no html. No atributo class desta tag poderemos utilizar o metadata "{size:valor}" para passar o tamanho que será utilizado para efetuar o arredondamento.
Importante o meta "{size:20}" é opcional, caso opte por não utilizar o pluguin irá utilizar o valor default que é 10.

Script

<script type="text/javascript">
	$().ready(function() {
		$(".rounded").rounded();
	});
</script>

Neste código podemos ver a forma como utilizar o plugin.
No método redy da jQuery (quando terminar de carregar o html e antes de carregar as imagens) selecionamos os elementos atraves de qualquer um dos seletores da jQuery e chamamos o metodo rounded() para este objeto.

Exemplos

<script type="text/javascript">
	$().ready(function() {
		$(".webtrin").rounded();
	});
</script>

<img src="img/rounded.jpg" width="342" height="92" />
<img src="img/rounded.jpg" width="342" height="92" class="webtrin" />
<img src="img/rounded.jpg" width="342" height="92" class="webtrin {size:20}" />
<img src="img/rounded.jpg" width="342" height="92" class="webtrin {size:30}" />