Facebook 및 Orkut 앨범 사진에서와 같이 사진을 찍습니까?

Question

Facebook 및 Orkut 사진 앨범과 같은 사진 태그를 구현할 수있는 jQuery 라이브러리 또는 리드가 있습니까?

감사

Answer 1

이 목적에 적합한 플러그인을 찾지 못했습니다. 그래서 XML 파일을 통해로드 된 좌표를 기반으로 이미지 위에 영역을 표시하기 위해 작은 플러그인을 작성하게되었습니다.

기본 코드는 다음과 같습니다.

<div id="imageholder">

 <!-- The main image -->
 <img src="<link to image file>" alt="Image">

 <!-- The grid tags -->
 <div class="gridtag" style="bottom: 100px; left: 106px; height: 41px; width: 41px;"/>
 <div class="gridtag" style="bottom: 300px; left: 56px; height: 100px; width: 56px;"/>

 <div class="gridtag" ...

</div>

그리고 기본 CSS 스타일이 필요합니다.

#imageholder{
 height:500px;
 width:497px;
 position:relative;
}
div.gridtag {
 border:1px solid #F0F0F0;
 display:block;
 position:absolute;
 z-index:3;
}

위의 클래스 "gridtags"가있는 DIV에서 XML 또는 JSON을 통해 jQuery를 사용하여 추가 되고이 DIV의 바인딩 이벤트를 통해 Orkut에서 비슷한 광기를 만들 수 있습니다.

추신 : 이것은 광기 화의 한쪽에 불과합니다. 이미 좌표가 있다면 이미지에 표시하고 클릭 이벤트를 추가 할 수 있습니다. 이것이 실제로 원하는 부분입니다. :) 여러분은 광기의 표시 부분을 수행하기 위해 코드를 작성해야합니다.

Answer 2

흠, 나는 새로운 버전을 발견했다 IMG 노트 당신이 원하는 것을 정확하게하는 것 같습니다.

체크 아웃 데모. 태그 메모를 쉽게 추가하고 jQuery를 사용하여 표시 할 수 있습니다. 그는 또한에 달려 있습니다 imgareaselect 메모 추가를위한 jQuery 플러그인.

Answer 3

당신은 시도 할 수 있습니다 jcrop 또는 imgareaselect. Facebook과 동일한 동작의 100%가 아니라 약간의 조정이 있으므로 가능해야합니다.

Answer 4

Facebook의 기능과 같은 태그의 좋은 예와 복잡한 예는 다음과 같습니다.말하는 사진, Facebook 응용 프로그램입니다.