像Facebook和Orkut相冊照片一樣的照片？

Question

有沒有一個jQuery庫或任何線索實現Facebook和Orkut相冊中的照片標記？

感謝

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; 
} 

在與類的div上方 「gridtags」 通過XML或JSON使用jQuery加入並通過綁定這個div上的事件，我們可以在Orkut中進行類似的phototagging。 PS：這只是一面的phototagging，也就是說。如果我們已經有了座標，我們可以在圖像上標記並添加點擊事件，這是我想要的部分。 :)你們必須編寫代碼來完成照片標記的標記部分。

Answer 2

你可以嘗試Jcrop或imgAreaSelect。 不是100％與Facebook相同的行爲，但有一些調整，這應該是可能的。

Answer 3

嗯，我發現Img Notes的新版本似乎正是你想要的。

結帳Demo。它允許您輕鬆添加標記筆記並使用JQuery顯示它們。他還取決於imgAreaSelect jquery插件添加註釋。

Answer 4

一個好的和複雜的Facebook標籤功能的例子是 Talking Pictures，這是一個Facebook應用程序。