I am trying to use Fancybox within my app and while the plugin works (it opens the images in the lightbox), it is not recognizing the rel or data-fancybox-group attribute to group multiple images (so that I can navigate through them right in the lightbox).
Here is my directive:
app.directive('fancybox', function() {
return {
restrict: 'A',
link: function(scope, element) {
$(element).fancybox({
theme : 'dark'
});
}
};
});
And here is how I invoke it on the template:
<figure ng-repeat="img in event.imagenes">
<a ng-href="/data/img/{{img}}" data-fancybox-group="gallery" fancybox>
<img ng-src="/data/img/th-{{img}}">
</a>
</figure>
I've tried to set the rel/data-fancybox-group attribute in the directive itself but the result is the same, it adds the attribtute but Fancybox doesn't recognize the images as part of the same group.
Any help is appreciated, thanks!
Solved it in the following manner:
app.directive('fancybox', function() {
return {
restrict: 'A',
link: function(scope, element) {
if (scope.$last) setTimeout(function() {
$('.fancybox').fancybox({
theme : 'dark'
});
}, 1);
}
};
});
Adding the scope.$last condition makes it so that the fancybox is applied only when all the images have been loaded (as opposed to applying it to each image as it is being added to the DOM). Now the data-group/rel function works.