[jQuery] 아바타, 사진 이미지 동그랗게 만드는 플러그인(Circularise)

2015-02-11 09:37:06에 작성됨 | 자바,JS,JSP

말그대로 최근 웹 사용자 경험 경향 중 하나인 동그란 프로필, 아바타 이미지를 만들어주는 플러그인으로, 기존의 정사각형 이미지 요소에 적용하여 자동으로 동그라미로 만들어준다. 자작 플러그인이다. 그래서 코드도 엉망

cirexm
그냥 이렇게 만들어 주는 것.

만든 계기는 위 같이 만드는데 보니 DIV요소 추가하고 거기에 배경 속성으로 CSS로 어쩌구 저쩌구… 새로 만드는 사이트에도 요소하나하나 추가하기 더럽게 귀찮은데, 기존에 완성된 사이트에 추가하려니 너무 귀찮아서 아예 자동화 시켜버렸다.(…)

사용법은 간단하다. 그냥 다음과 같이 img 요소에 다음과 같은 클래스가 부여되어 있으면
<img src=”/avatar/img_here.png” class=”cr-avatar” alt=”아바타” />
자바스크립트 호출 부분에 다음과 같이 써주면 끝.
$(‘.cr-avatar’).circularise();

물론 생성시 이런저런 옵션도 넣을 수 있다. 자세한 내용은 아래 사이트 참고(콩글리쉬의 압박)

홈페이지 : http://circularise.jhp.io
다운로드 : http://source.jprogramme.com/jquery.circularise.js/downloads

Leave a Reply

Your email address will not be published. Required fields are marked *