Phototagging como en fotos de álbumes de Facebook y Orkut?

Question

¿Existe una biblioteca de jQuery o alguna pista sobre la implementación de etiquetado de fotos como en los álbumes de fotos de Facebook y Orkut?

Gracias

Answer 1

No encontré ningún complemento adecuado para este propósito. Así que terminé escribiéndome un pequeño plug-in para marcar áreas sobre una imagen basada en las coordenadas cargadas a través de un archivo XML.

El que se requiere código básico es:

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

Y el estilo básico de CSS requiere:

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

En lo anterior los divs con clase "gridtags" se añaden usando jQuery a través de XML o JSON y al vincular eventos en este divs, podemos hacer que el fototaje sea similar en orkut.

PD: Este es solo un lado del fototagistro, es decir. si ya tenemos las coordenadas, podemos marcar en una imagen y agregar eventos de clic, que es la parte que realmente quería. :) Ustedes tienen que escribir el código para hacer la parte de marcado del fototexto.

Answer 2

podría intentar Jcrop o imgAreaSelect. No es 100% el mismo comportamiento que en Facebook, pero con algunos ajustes, esto debería ser posible.

Answer 3

Hmmm, encontré que la nueva versión de Img Notes parece hacer exactamente lo que quiere.

Pagar el Demo. Le permite agregar fácilmente notas de etiquetas y mostrarlas usando JQuery. También depende del plugin jquery imgAreaSelect para agregar notas.

Answer 4

Un ejemplo bueno y complejo de funcionalidad similar a la etiqueta en Facebook es Talking Pictures, que es una aplicación de Facebook.