issue: Broken on isotope 2.0

[mikey0000]

replacing isoInit.element = element; with isoInit.element = $(element);

within the directive isotopeContainer fixes the problem.

[mikey0000]

I can't seem to figure out how to set options for isotope? any chance you can tell me?

[mankindsoftware]

Hi,

I've got some new documentation at http://mankind.com/angular-isotope/index.htmlhttp://mankind.com/angular-isotope/index.html. Basically, you can emit an event, with the message passed on to Isotope.

Hope this helps.

Mark Angular-Isotope Events Angular-Isotope listens for the following events and passes the data to Isotope's corresponding option or method command.

$scope.$emit('iso-option', {options};$scope.$emit('iso-method', {name:methodName, params:optionalParameters};

Metafizzy Isotope APIs optionshttp://isotope.metafizzy.co/docs/options.html | methods http://isotope.metafizzy.co/docs/methods.html

Example

$emit('iso-method', {name:'shuffle', params:null})

On Thu, May 15, 2014 at 5:36 PM, Michael Arthur notifications@github.comwrote:

I can't seem to figure out how to set options for isotope? any chance you can tell me?

— Reply to this email directly or view it on GitHubhttps://github.com/mankindsoftware/angular-isotope/issues/15#issuecomment-43282578 .

[anderskristo]

Mark, how do I add the masonry layout? Also an exempel with imagesLoaded.

[mikey0000]

It should default to masonry as per the snapjs docs

On May 18, 2014 7:35:12 AM GMT+12:00, Anders Kristoffersson notifications@github.com wrote:

Mark, how do I add the masonry layout? Also an exempel with imagesLoaded.

---

Reply to this email directly or view it on GitHub: https://github.com/mankindsoftware/angular-isotope/issues/15#issuecomment-43422128

Sent from my Android phone with K-9 Mail. Please excuse my brevity.

[gablabelle]

@mankindsoftware @mikey0000 : like @anderskristo have asked I'd also like to see an example with imagesLoaded. For now I've added another directive to do the following or else my images overlaps.

  .directive('isotope', function($timeout) {
    return {
      restrict: 'A',
      link: function(scope, element) {
        $timeout(function() {
          angular.element(element).isotope({
            onLayout: function() {
              angular.element(element).imagesLoaded( function() {
                angular.element(element).isotope('reLayout');
              });
            }
          });
        });
      }
    };
  })

Maybe I'm doing something wrong?

Also, for the newbie coder that I am, seeing a working example of how "normal" isotope options translate to a iso-options-subscribe="my-iso-opts" and/or iso-method-subscribe="my-iso-method" would greatly help. How should I set and where should I put my-iso-opts and my-iso-method?

FYI: My project is available at https://github.com/gablabelle/ng-portfolio

Many thanks for your time and help.

[mikey0000]

@gablabelle I've also had the image overlapping issue, I fixed it by pre-loading the images before displaying isotope.

the other way to do the directive that might work is this

angular.module('app.directives').directive('imageonload', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.bind('load', function() {
          $(this) //do something with this
        });
    }
};
});

just place imageonload in the image tag and this will fire when the image has loaded

[gablabelle]

@mikey0000 I'm actually trying to lazyload the images not to preload them since I'll be having lots of them on this page. It works fine using imagesLoaded as described at http://isotope.metafizzy.co/appendix.html#imagesloaded

I just can't find a solution to make it work correctly with angular-isotope as it should.

[mikey0000]

@gablabelle I think the best solution is if you know what the height and width is, is to set a loading image and set the height and width of each image, this will stop the overlap and will provide feedback that images are loading. another alternative is to lazyload one at a time and add them to the list as they are ready. I've never used isotope on its own so I can't really help in terms of visually understanding what your trying to achieve. I've downloaded your project to both take a look at your approach as I am facing similar issues.

[blowsie]

Is there plans to update the code to use isotope 2.0?

[nguyenDalex]

Up vote for isotope 2.0?

[langfors]

:+1: mikey2000 solution at the top gets isotope 2.0 working for me.

[JonCognioDigital]

I was hoping that somebody would have found a solution to using imagesLoaded. Anybody got this to work yet?

[Papagoat]

This method works for me using isotope version 2.

// // ====================================================================================================
// // Isotope ImagesLoaded
// // ====================================================================================================

(function() {
    var app = angular.module('imagesLoaded', []);

    app.directive('imagesLoaded', function($timeout) {
        return {
            restrict: 'A',
            link: function($scope, $elem, $attr) {

                $timeout(function() {
                    $elem.isotope();

                    $elem.isotope('once', 'layoutComplete', function(isoInstance, laidOutItems) {
                        $elem.imagesLoaded(function() {
                            $elem.isotope('layout');
                            // console.log(isoInstance);
                        });
                    });
                }, 0);
            }
        };
    });
})();

Attach to your main module and add the directive to your element. eg,

<ul isotope-container images-loaded>

[cherchyk]

to @Papagoat :+1: Do you have example ImagesLoaded + angular-isotope + isotope >2 ???

I'm struggling hard to make it working.

[Papagoat]

Hi @cherchyk, apologies for the late reply. Unfortunately I do not have an example. It's not too hard though. Just use the directive that I have posted above in your AngularJS application and apply the directive to the isotope container.

It's not perfect though. You will need to configure angular isotope to reLayout on scroll because the grid breaks when the images are loaded.

[thomask]

+1