Marcação de fotos como no Facebook e Orkut fotos do álbum?

Question

Existe uma biblioteca jQuery ou alguma pista sobre a implementação de que a marcação de fotos como no Facebook e Orkut Álbum fotográfico?

Graças

Answer 1

Eu não encontrou qualquer plugins adequados para esta finalidade. Então eu acabei escrevendo-me um pequeno plug-in para áreas nota acima de uma imagem com base nas coordenadas carregado através de um arquivo XML.

O código básico é necessário é:

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

E o estilo básico CSS necessário:

#imageholder{
 height:500px;
 width:497px;
 position:relative;
}
div.gridtag {
 border:1px solid #F0F0F0;
 display:block;
 position:absolute;
 z-index:3;
}

Na acima dos divs com classe "gridtags" são adicionados usando jQuery através de XML ou JSON e por eventos de ligação a partir desta divs, podemos fazer marcação de fotos semelhante no Orkut.

PS: Isto só um lado da marcação de fotos, ie. se já temos as coordenadas podemos marcar em uma imagem e adicionar clique eventos, que é a parte realmente eu queria. :) Vocês tem que escrever código para fazer a parte de marcação da marcação de fotos.

Answer 2

Hmmm, eu descobri que a nova versão do Img Notas parece fazer exatamente o que você quer.

Checkout Demonstração . Ele permite que você facilmente adicionar notas tag e mostrar-lhes usando JQuery. Ele também depende da imgAreaSelect plugin jQuery para adicionar notas.

Answer 3

você poderia tentar Jcrop ou imgAreaSelect . Não 100% o mesmo comportamento que no Facebook, mas com alguns ajustes, este deve enviar um e possível.

Answer 4

Um bom exemplo e complexo de tag como funcionalidade no facebook é Falar Pictures , que é um aplicativo do Facebook.