เพิ่มป้ายคำแนะนำเครื่องมือรูปภาพอย่างง่ายด้วย Taggd

คุณรู้ว่า Facebook ช่วยคุณได้อย่างไร ฉลากใบหน้า ในรูป? ดี, Taggd ค่อนข้างจะเหมือนกับ CSS / JS ที่เทียบเท่ากัน ใช้จุดเพื่อสัญกรณ์ ที่เคล็ดลับเครื่องมือควรปรากฏบนภาพ.

ห้องสมุดไม่มีค่าใช้จ่ายและ ไม่ต้องการการพึ่งพาใด ๆ เช่น jQuery มัน ทำงานบน JavaScript วานิลลาแท้ๆ, และติดตั้งง่ายสุด ๆ.

คุณสามารถเรียนรู้เพิ่มเติมได้จากหน้าแรกของ Taggd รวมถึงการสาธิตและขั้นตอนพื้นฐานบางอย่าง สำหรับการเริ่มต้น.

นอกจากนี้ยังมีลิงก์ไปยัง เอกสารออนไลน์ การใช้ Doclets เป็นเว็บแอพเล็ก ๆ ที่เรียบง่ายที่ทำขึ้นเพื่อเป็นเอกสารประกอบของ JS คุณสามารถ ค้นหาเวอร์ชัน Taggd, หรือ เรียกดูรุ่นปัจจุบัน ในสาขาหลัก.

จากนั้นคุณจะได้รับ รายการใหญ่ของคุณสมบัติ คุณสามารถใช้ได้. เอกสารแต่ละรายการจะถูกแยกตามฟังก์ชั่นที่ ดำเนินการกับภาพ (เช่น addTag () หรือ getTag ()) ตามด้วยฟังก์ชั่นที่ช่วยคุณ จัดการแท็กเฉพาะ (เช่น คำสั่ง setPosition ()).

อีกครั้งทุกอย่าง ทำงานบน JavaScript วานิลลา ดังนั้นคุณไม่จำเป็นต้องกังวลเกี่ยวกับปัญหาไวยากรณ์.

ที่จะเริ่มต้น ตรวจสอบ repo GitHub, และปฏิบัติตามคำแนะนำในการตั้งค่า.

คุณเพียงแค่เพิ่มไฟล์ Taggd CSS และ JS เป็นของคุณ มาตรา , แล้ว สร้างตัวอย่างใหม่ ขององค์ประกอบ Taggd สิ่งเหล่านี้สามารถกำหนดได้ ทีละคน หรือ ในอาร์เรย์.

แล้วก็ ต่อท้ายภาพ, และโอมเพี้ยง! คุณพร้อมแล้วที่จะไป.

ฉันชอบที่จะเห็น คุณสมบัติพิเศษเพื่อปรับแต่งป้ายกำกับของแท็ก, และเปลี่ยนรูปร่างของพวกเขา มันยอดเยี่ยมมากที่จะสร้างแท็กสแควร์เพื่อล้อมวัตถุมากกว่าจุดสีชมพูเล็ก ๆ แต่สำหรับห้องสมุดฟรีที่ไม่มีการพึ่งพาฉันไม่สามารถบ่นอะไรได้มาก.

จนถึงห้องสมุดนี้ทำ สำหรับเบราว์เซอร์ที่ทันสมัยเท่านั้น, และไม่สนับสนุนการย่อยสลายที่งดงาม อย่างไรก็ตามคุณสามารถเปิดปัญหาบนหน้า repo หรือลองแก้ไขปัญหาอื่น ๆ หากคุณเห็นปัญหาง่าย ๆ อย่างไรก็ตาม Taggd ยังคงเป็นส่วนเสริมของปลั๊กอินและเป็นประโยชน์ในการใช้สำหรับโครงการใด ๆ.

ลองดูที่หน้าแรกของผู้แต่ง รหัสตัวอย่าง และ ลิงค์ DL พร้อมกับ ลิงค์ไปยังหน้าเอกสาร.

และหากคุณมีคำถามหรือข้อเสนอแนะโปรดส่งข้อความถึงผู้สร้าง Tim Severien บน Twitter ของเขา @ TimSeverien.