Taggd를 사용하여 단순 이미지 툴팁 레이블 추가

당신은 페이스 북이 당신에게 어떻게 라벨면 사진에? 잘, Taggd CSS / JS와 매우 비슷합니다. 주석을 달기 위해 점들 사용하기 툴팁이 이미지에 나타나는 위치.

도서관은 완전 무료이며 의존성이 필요 없다. jQuery와 같은 그것 순수 바닐라 자바 ​​스크립트에서 실행됩니다., 설치가 매우 쉽습니다..

당신은 Taggd 홈 페이지에서 더 많은 것을 배울 수 있습니다. 데모 및 몇 가지 기본 단계가 포함되어 있습니다. 시작하기.

또한에 대한 링크가 있습니다. 온라인 문서 도크 릿 (Doclets)은 JS 문서 용으로 제작 된 깔끔한 작은 웹 앱입니다. 너는 할 수있다. Taggd 버전 검색, 또는 현재 버전 찾아보기 마스터 브랜치에서.

거기에서부터 거대한 속성 목록 당신이 사용할 수있는. 각 문서는 이미지를 조작하다 (예 : addTag () 또는 getTag ()) 다음에 당신을 도울 함수들 특정 태그 조작 (예 : setPosition ()).

다시, 모든 것 바닐라 자바 ​​스크립트에서 실행됩니다. 구문에 대해 걱정할 필요가 없습니다..

시작하려면 GitHub 저장소를 확인하십시오., 설정 지시 사항을 따르십시오..

Taggd CSS 및 JS 파일을 추가하기 만하면됩니다. 너에게 섹션 , 그리고 새 인스턴스 만들기 Taggd 요소들. 이들은 정의 될 수있다. 하나씩 또는 배열로.

그때 그들을 이미지에 붙이다, 그리고 presto! 너는 모두 갈 준비가되어있다..

나는보고 싶다. 태그 레이블을 사용자 정의하는 추가 기능, 모양을 바꿉니다. 작은 분홍색 점보다는 오히려 객체를 둘러싸 기 위해 정사각형 태그를 만드는 것이 좋을 것입니다. 그러나 의존성이없는 무료 라이브러리의 경우 많은 불만을 제기 할 수 없습니다..

지금까지이 도서관이 만들어졌습니다. 최신 브라우저 전용, 우아한 퇴화를 지원하지 않습니다. 그러나 repo 페이지에서 언제든지 문제를 열거 나 간단한 문제가 있으면 다른 문제를 해결할 수 있습니다. 그럼에도 불구하고 Taggd는 여전히 플러그인의 일종이며 모든 프로젝트에 사용하는 것이 실용적입니다..

에 대한 저자의 홈페이지를 확인하십시오. 샘플 코드 과 DL 링크 함께 문서 페이지 링크.

질문이나 제안 사항이 있으면 작성자 Tim Severien을 트위터 @TimSeverien에 자유롭게 보낼 수 있습니다..