javascript - 像 Facebook 和 Orkut 相册照片中的照片标记？

Question

是否有 jQuery 库或任何关于在 Facebook 和 Orkut 相册中实现照片标记的线索？

谢谢

Answer 1

嗯，我发现新版本的Img Notes似乎完全符合您的要求。

查看演示。它允许您轻松添加标签注释并使用 JQuery 显示它们。他还依赖于imgAreaSelect jquery 插件来添加注释。

Answer 2

你可以试试Jcrop或imgAreaSelect。不是 100% 与 Facebook 相同的行为，但经过一些调整，这应该是可能的。

Answer 3

我没有找到任何适合这个目的的插件。因此，我最终为自己编写了一个小插件，以根据通过 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 是使用 jQuery 通过 XML 或 JSON 添加的，通过在这个 div 上绑定事件，我们可以在 Orkut 中进行类似的照片标记。

PS：这只是照片标记的一侧，即。如果我们已经有了坐标，我们可以在图像上标记并添加点击事件，这正是我想要的部分。:) 你们必须编写代码来进行照片标记的标记部分。

Answer 4

facebook 中类似标签功能的一个很好且复杂的示例是 Talking Pictures，它是一个 facebook 应用程序。