current community

your communities

more stack exchange communities

Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 0 down vote favorite
1

I'm trying to get the lightGallery jQuery plugin (http://sachinchoolur.github.io/lightGallery/index.html) to work with AngularJS.

I found some answers that suggested I needed a directive, so I created the following:

.directive('lightGallery', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            jQuery(element).lightGallery();
        }
    };
})

Then in my view I do this:

<ul lightGallery>
    <li ng-repeat="photo in album.photos" data-src="{{photo.fullres}}">
        <img ng-src="{{photo.thumbnail}}" />
    </li>
</ul>

(I also tried with <ul light-gallery>) When I run the page nothing happens when I click any of the thumbnails. I can put an alert() in the link function, though, and that is displayed.

How can I get AngularJS to play along with jQuery and this plugin?

UPDATE:

After some debugging it seems that jQuery(element).lightGallery() is executed before the model is bound to the view. So the question then is how I can get a directive to be called when everything is bound and not before.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

Call lightGallery once ng-repeat is finished rendering.
You can just modify the directive like this 

.directive('lightgallery', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      if (scope.$last) {

        // ng-repeat is completed
        element.parent().lightGallery();
      }
    }
  };
});

HTML

<ul>
  <li lightgallery ng-repeat="photo in photos" data-src="{{photo.fullres}}">
    <img ng-src="{{photo.thumbnail}}" />
  </li>
</ul>

Here is the demo plnkr

share|improve this answer
    
Works like a charm. Thank you! :D –  GTHvidsten May 15 at 15:33
    
A follow up question. lightGallery documentation states that you can use the data-sub-html attribute to display captions for images. I added this attribute to the LI element, but nothing was displayed. I also tried adding a separate div (inside the LI) and referring to that instead, but that didn't work either. Any tips on how to use the captions when using AngularJS? –  GTHvidsten May 15 at 20:48
    
Caption works fine for me. I think your caption div doesn't have any style so it is hiding behind the image. Either you can use lightGallery default '.custom-html' class or you can apply css by yourself. here is the updated plnkr –  Clr May 16 at 3:20
    
Ah, I was missing the .custom-html class. If I encapsulated my caption in a div with that class the captions works. The documentation might need updating as that says <li data-sub-html="<h3>My caption</h3><p>My description..</p>" /> </li> which is exactly what I had. –  GTHvidsten May 16 at 9:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.