像 Facebook 和 Orkut 相册照片中的照片标记？答案

【问题标题】：Phototagging like in Facebook and Orkut album photos?像 Facebook 和 Orkut 相册照片中的照片标记？
【发布时间】：2010-10-11 11:39:14
【问题描述】：

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

谢谢

【问题讨论】：

标签： javascript jquery web-applications jquery-plugins

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

一次我可能需要显示多个位置/区域:(
在 Facebook 中，任何时候都不会显示超过 1 个矩形。
在 orkut 中，它们最初显示所有矩形，然后淡出。
那么，实际上，您希望它像在 Orkut 中一样，而不是像在 Facebook 中那样？
两者背后的基本思想是一样的。

【解决方案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：这只是照片标记的一侧，即。如果我们已经有了坐标，我们可以在图像上标记并添加点击事件，这正是我想要的部分。 :) 你们必须编写代码来进行照片标记的标记部分。

【讨论】：

【解决方案4】：

在 facebook 中，标签功能的一个很好且复杂的例子是 Talking Pictures，这是一个 facebook 应用程序。

【讨论】：