Thank you for this great module! :)
I'm wondering if it is possible to hide the field collection (fc) information by default and show for example only fc #1 when the user hovers the annotator #1 in the image?

Comments

attiks’s picture

attiks commented

It is possible, but will need some custom javascript code, I don't have time for the moment to implement this, but if you can supply a patch I can provide feedback.

design.er’s picture

design.er commented

Unfortunately my project was canceled yesterday so i don't need this solution anymore and don't have the time to dig deeper. Nevertheless i have a working solution. The name of the field collection is custom, so I couldn't create a patch. But here is my code... maybe it will help others.

In my special case I needed the Field Collection information inside/right beneath the image annotator so I had to append each Field Collection field to the appropriate annotator number.
The CSS class of the Field Collection: .field-name-field-infos
In the image_annotator.js paste the following code on line 121:

// Append each Field Collection field to its image annotator
$pointer.each(function(index){
  var index = self.numberOfPointers;
  $('.field-name-field-infos .field-items').children('.field-item').eq(index).appendTo($pointer);
});

$pointer.mouseenter(function(){
  $('.image-annotator-pointer').removeClass('active'); // optional
  $(this).addClass('active'); // optional
  $(this).children('.field-item').stop(true,true).fadeIn(200).animate({opacity:1}); // i experienced problems with the opacity if some cases so i force full opacity
}).mouseleave(function(){
  $('.image-annotator-pointer').removeClass('active'); // optional
  $('.image-annotator-pointer').children('.field-item').stop(true,false).fadeOut(200).animate({opacity:0});
});

I also needed this css code:

.image-annotator-pointer .field-item, .field-name-field-infos {
  display: none;
}
.image-annotator-pointer .field-item .field-item, .field-name-field-infos .field-items .field-item .field-item {
  display: block !important;
}

Just replace the field-name-field-infos by your field collection css name.

Stefan