I
I
IvanKalinin2016-02-10 10:46:03
JavaScript
IvanKalinin, 2016-02-10 10:46:03

How to make AngularJS and jQuery Justified Gallery friends?

All the best. I'm trying to use the Justified Gallery
jQuery library . In the controller, I create an array with links to images. Further , according to this decision, I build the structure. The result is this picture: Template



<div justified id="justified">
       <a ng-repeat="image in imagesInView track by $index" ng-href="#" repeat-done>
            <img ng-src="{{image}}"/>
        </a>
</div>


Repeat done directive
angular.module('myApp')
    .directive('repeatDone', [function() {
        return {
            restrict: 'A',
            link: function(scope, element, iAttrs) {
                var parentScope = element.parent().scope();
                if (scope.$last) {
                    parentScope.$last = true;
                }
            }
        };
    }]);


justified directive
angular.module('myApp')
    .directive('justified', [
        function() {
            return {
                restrict: 'A',
                link: function(scope, el, attrs) {
                    scope.$watch('$last', function(n, o) {
                        if (n) {
                            angular.element("#justified").justifiedGallery({
                                rowHeight: 300
                            });
                        }
                    });
                }
            };
        }]);


Then the most interesting begins.
After the library is initialized, the sizes of the images are calculated, placed on the grid, and immediately height: 0px is applied to the gallery container (with id "justified");
As soon as you change the size of the window, the dimensions are recalculated and the correct height is applied to the size of the container.

I tried to hack the jg.complete event. roughly like this.

.on('jg.complete', function(){
//recalc для избежания вечного цикла
    if (!recalc) {
        angular.element("#justified").justifiedGallery('norewind');
        recalc = true
    }
});


On the one hand, the hack solves the problem. The gallery is displayed immediately, but it is not possible to dynamically add new images by infinite scroll.

Anyone who has come across this module or knows other solutions on like flickr galleries - I will be grateful.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question