Fancybox directive in ng-repeat is not grouping images

Question

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!

Answer 1

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.

Answer 2

It appears that the directive is applied individually to each element so you end up with several distinct fancybox instances instead of one with grouped images.

I applied the directive to an outer element and then found the inner elements I wanted to apply fancybox to, then use rel="group" as you normally would.

angular.module('myApp').directive('fancybox', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            // find the inner elements and apply fancybox to all of them at once 
            var apply_fancybox_to = element.find('a.fbelements');


            $(apply_fancybox_to).fancybox({  
                maxWidth    : 800,
                maxHeight   : 400,
                fitToView   : true,
                width       : '70%',
                height      : '70%',
                autoSize    : false,
                openEffect  : 'none',
                closeEffect : 'none'
            });
        }
    }
});



<ul class="small-block-grid-6" fancybox>
    <li ng-repeat="file in vm.user.files">
        <a class="fbelements" rel="group" href="{{file.file_url}}"><img src="{{file.file_thumb_url}}" border="0" /></a>
    </li>
</ul>

Answer 3

Here another approach

Using REL attribute instead data-fancybox-group

app.directive('fancybox', function() {
    var linker = function(scope,element,attr){
        if(scope.$last) {
            var target = jQuery("[rel='" + attr.rel + "']");
            target.fancybox();
        }
    };
    return{
        restrict : "A",
        link: linker
    }
}

this will work too if you have many groups.... and prevent "double event binding"