passy / angular-masonry Goto Github PK

I have a masonry-brick which can change the height of any item selector in this script whenever I click a 'More/Less' button. But when I click this button, it causes some errors of other masonry-brick scripts which is in inside each other, so how can I fix this issue, please help me asap?

Fixed!

I should have checked the issues section more carefully before going on this wild goose chase, #4 is exactly the issue I was having. @mafrost posted a link to a fix that solved my problem. Glad this is over with!

loading items with this library is working perfectly, and on mouseover two hidden div with data get showed and disappeared on mouseleave. But whenever i do it, all div's start shifting, floating i.e relayout. But i don't want these div's to get shifted. How can we achieve this?
Stackoverflow link: http://stackoverflow.com/questions/22200117/rearrange-layout-on-hover-using-angular-masonry

In order to make custom animations with this directive, i tried to import ngAnimate ( in this case v1.3.0 ).

When i try to apply some animation to a ng-repeat element, this custom animation don't works, and if include ng-Animate to my app module, with the example of demo page, the custom transition to append an element to a masonry div don't work.

is this directive compatible with ng-Animate? how i can do them work?

Anyway, can i change transform and transition made by default?

Thanks you, and thanks for this directive

Hi,
possible noob question but having difficulty getting a static brick (not from hg-repeat) to insert before the main bricks. The laid-out bricks over-write the first (static) brick instead of following it - I'm using the static first brick as a button to insert a new record.
Any help appreciated,
Thanks,
John

I installed the package via bower and linked everything as directed. However, no masonry effect and Angular is throwing console errors.

On the project home page/demo page, I get these errors and no images/tiles display at all:

This is using Chrome Version 38.0.2107.2 dev (64-bit) for Mac.

I have Jquery, masonry & angular-masonry included in the app.

Any advice!

Should probably mention wu.masonry needs to be added to the module's dependencies.

instead of masonry with huge dependencies

I keep getting this error:

The jquery element in the masonry directive doesn't seem to have masonry actually loaded into the jquery element.

I think I have everything loaded correctly. Any help would be appreciated.

Hi passy,

Just wondering if you knew how to get this running with an AMD loader like RequireJS. I admit that I'm a bit new to both angular and require. Any help would be greatly appreciated!

Hello,

I'm using angular-masonry on a project and it works fine.

But since I have lots of images I wish to lazyload images using the jquery plugin which works but the images overlap each others because they don't have width and height set.

So I guess I need to relayout masonry after the images are loaded in the DOM. I use the following directive to lazyload the images:

.directive('lazyload', function($timeout) {
    return {
      restrict: 'A',
      link: function (scope, element) {
        $timeout(function() {
          angular.element(element).lazyload({
            effect: 'fadeIn',
            effectspeed: 500,
            'skip_invisible': false,
            failure_limit: Math.max(angular.element(element).length - 1, 0),
            threshold : 1000,
            load: function() {
                angular.element(element).trigger('scroll');
            }
          });
        }, 0);
      }
    };
  })

and apply it to the following HTML markup:

<div masonry preserve-order load-images="true" class="stream row ng-cloak" ng-controller="PhotosCtrl">
    <article class="photo masonry-brick" ng-repeat="photo in photosList">
        <a no-click href="#">
            <img lazyload ng-src="images/transparent.gif" data-original="{{photo.url}}" alt="{{photo.title}}">
        </a>
    </article>
</div>

Any suggestions would be greatly appreciated. Please keep in mind that I not an experienced coder.

Many thanks for your time and help.

I'm running into some issues where then the page first renders my mason bricks, it lays out the mason bricks vertically like so.
[[brick 1]]
[[brick 2]]

Then an instant later it lays out the bricks horizontally.

[[brick 1]] [[brick 2]]

This cause a flickering on every page load. In my project, my bricks are Angular directives. And Angular is rendering out the bricks before Masonry has a chance to lay them out. Have you run into this issues before?Have you tested this library on directives instead of just images?

On page unload/switch:

cannot call methods on masonry prior to initialization; attempted to call 'remove' 

Hi,

version 0.8.1 look like not recognise the option to start in the left, i understood that was resolve in the 0.7.0

<div masonry masonry-options="{gutter: 13, transitionDuration: 0, isOriginLeft: true}">
  <div class="masonry-brick" ng-repeat="item in BoxesApp.data.list">
    <ng-include src="box.html'" ></ng-include>
  </div>
</div>

i'm missing something?

Thanks

Curious as to what your thoughts are on making this work without needing jQuery. I have a working fork if you would like to take a look.

https://github.com/dremonkey/angular-masonry/compare/nojquery

They should point to: http://passy.github.io/angular-masonry/

My current use case has images within the masonry-bricks, and unless I'm missing something, it seems that the order in which the images are loaded determines the order in which they are appended to masonry. Every time I refresh the page I get a randomly different ordering due to the image load time.

I'd like the order of the array in my ng-repeat to determine the order in the masonry layout, so the first element would always appear in the upper left.

Any thoughts on how I could accomplish this?

Thanks!

My code is something like this,

<div infinite-scroll='movie.nextPage()' 
  infinite-scroll-disabled='movie.busy' infinite-scroll-distance='1' 
  class="main_container" masonry preserve-order item-selector=".pin" 
  masonry-options="{ isFitWidth: true, transitionDuration: 0 }">
    <div ng-repeat="movie in movies">
      <av-movie movie="movie">
    </div>
</div>

and main js code is like

movie.busy = true;
if (options && options.replace) {
  $scope.movies.splice(0);
}
list(movie.type, movie.page).then(function(data){
  $scope.movies = $scope.movies.concat(data);
  movie.busy = false;
});

During it is loading the images, if I try to remove all images and add some images again, it will cause masonry not work. There is only one long vertical line of images.

But if I add preserve-order and it works fine.

I use firebug to read your sample site and include javascripts, however, everytime I include wu.masonry into my module. the console shows me the errors. remove wu.mosonry, everything back to normal again.
Can U help?

Cheers
Tao

Hi for some reason whenever i try running your code on a server, the ng-source doesn't get the image off the website url and the alt message is displayed instead. any help?

can u please add the support to gutter width coz it's not working ... thanks

To be honest I'm not entirely certain where the issue lies here, but I haven't had a lot of luck in attempting to pass in options such as transitionDuration to Masonry via the methods outlined in the documentation.

After a little digging I noticed that attrOptions is being set from attrs.options, whereas the options string is stored as attrs.masonry.

Edit: Line 105 is the relevant one

Do you have any thoughts on whether this is actually a bug or just my misuse of the library?

Thanks

The markup:

<div class="discovery" data-ng-controller="ResourcesController" data-ng-init="find()"> 
    <div masonry>
        <div class="masonry-brick card {{res.type}}" data-ng-repeat="res in resources" ng-switch on="res.type">

            Add just water...  
        </div>   
    </div>
</div>

"Error: element.masonry is not a function
preLink@http://127.0.0.1:3000/js/angular-masonry.js:133
A@http://127.0.0.1:3000/lib/angular/angular.min.js:49
h@http://127.0.0.1:3000/lib/angular/angular.min.js:43
A@http://127.0.0.1:3000/lib/angular/angular.min.js:49
h@http://127.0.0.1:3000/lib/angular/angular.min.js:43
Y/<@http://127.0.0.1:3000/lib/angular/angular.min.js:42
updateView@http://127.0.0.1:3000/lib/angular-ui-router/release/angular-ui-router.js:2290
$ViewDirective/directive.compile/</eventHook@http://127.0.0.1:3000/lib/angular-ui-router/release/angular-ui-router.js:2224
Ed/this.$get</h.prototype.$broadcast@http://127.0.0.1:3000/lib/angular/angular.min.js:107
transitionTo/$state.transition<@http://127.0.0.1:3000/lib/angular-ui-router/release/angular-ui-router.js:1822
Cd/e/l.promise.then/C@http://127.0.0.1:3000/lib/angular/angular.min.js:94
Cd/f/<.then/<@http://127.0.0.1:3000/lib/angular/angular.min.js:95
Ed/this.$get</h.prototype.$eval@http://127.0.0.1:3000/lib/angular/angular.min.js:104
Ed/this.$get</h.prototype.$digest@http://127.0.0.1:3000/lib/angular/angular.min.js:102
Ed/this.$get</h.prototype.$apply@http://127.0.0.1:3000/lib/angular/angular.min.js:105
e/h<@http://127.0.0.1:3000/lib/angular/angular.min.js:115
e@http://127.0.0.1:3000/lib/angular/angular.min.js:33
gd/h.defer/c<@http://127.0.0.1:3000/lib/angular/angular.min.js:37
" "

See 1eee22b#commitcomment-3871113

Currently those aren't mentioned anywhere.

Not sure if this is a problem in masonry or imagesloaded library ...

But I am using this to show items that include a remote link to a facebook image. It seemed to be overlapping always. My workaround was to change line 35 in your code to timeout for 500ms instead of 30.

Is this a horrible idea?

Currently, the options attribute is too vague, and may conflict with other directives. I'd suggest to allow passing options hash in the masonry attribute, like:

<div masonry="{columnWidth: 200, gutter: 10}"> ... </div>

I am using the angularjs masonry without jquery. I have a set of images (which I load through http get). I would like to show these images with masonry or Twitter style row.
Hence I created 2 div and show either row or masonry with radio buttons.
When I am in the masonry show option, everything works fine when I do loads from different sources.
When I am in row show mode and select the masonry mode, the images are lined up vertically one after other and not in the masonry mode. When I change the browser width the masonry updates.
What do I need to force the masonry refresh?
I have given below some snippets of the code.

 <div>
       <ul style="list-style: none;"  ng-repeat="image1 in country_museum_category_images" >
<li ><img ng-src="{{image1.imageinfo[0].thumburl}}" />{{(image1.title.replace(".jpg","")).replace("File:","")}}</li>

 </div> 

 <div id="masonry_div" class="masonry" masonry>
     <div class="container"   load-images="true">

        <div id="masonry-brick" class="masonry-brick" ng-repeat="image1 in country_museum_category_images">
     <img ng-src="{{ image1.imageinfo[0].thumburl }}" alt="A masonry brick">
</div>

</div>
</div> 

$scope.$watch( 'radioModel', function() {

});

I saw someone had the same issue and claim that you must check for last item in ng-repeat before creating the layout, in some cases a timeout will also alleviate this. How can I do this?

Hi,

I have some trouble. When the page loads I get this:
http://joxi.ru/YBQPVP3JTJCwfIgLgbc

Here is my code:

<div class="container" style="width:80%">
  <h1 style="text-align: center; margin-bottom: 40px">
    Category: {{category.text}}
  </h1>
  <div>(masonry='' load-images="false")
    <div class="masonry-brick">(ng-repeat="portal in category.claim_portals" style='width:50%;float:left')
      <div>
        <h3>(style='margin-left:30px')
          Portal: {{portal.text}}
        </h3>
        <div class="category-list" ng-repeat="claim in portal.portal_claim" style="margin-bottom:2px">
          <div class="claim_sections">
            <claimforlist>(claim="claim")</claimforlist>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

But after resizing browser window, everything becomes normal and looks like this:
http://joxi.ru/iBQPVP3JTJCUfLnoqQQ

It would be nice to make it work with newest version of angular.

Hello I would like to know if there is a way to call the http://masonry.desandro.com/methods.html from the directive ? for example i would like to have layoutComplete method.

thanks!

For some reason if the masonry-brick elements are manually added to the page instead of using ng-repeat the size of the wrapper is calculated wrong (ends up much too tall).

Clone https://github.com/dremonkey/angular-masonry/tree/bugDemo and run grunt to see this happening.

I'd like to access Masonrys EventEmitter but there's no clear way to access it. /cc @passy

Maybe something like

<div masonry on-layout-complete="myAwesomeMethod()">
</div>

would work for you?

Hi,

console tells me:
TypeError: Object [object Object] has no method 'masonry'

and also:
TypeError: Object [object Object] has no method 'imagesLoaded'
=> I have no images inside a brick - can I disable 'imagesLoaded'?

app.js

var myApp = angular.module('myApp', [
        'ngCookies',
        'ngResource',
        'ngSanitize',
        'ngRoute',
        'pascalprecht.translate',
        'wu.masonry',
        'ui.bootstrap'
    ])

index.html

<script src="bower_components/masonry/masonry.js"></script>
<script src="bower_components/angular-masonry/angular-masonry.js"></script>

html

    <div masonry item-selector=".mybrick" column-width="200" masonry-options="{ transitionDuration: '0.4s' }">
        <div div masonry-brick class="mybrick" ng-repeat="brick in bricks">
            <content-box box-info='1' box-color='green'>
            </content-box>
        </div>
    </div>

Thanks for any helpful suggestions!

This function is going to fire AFTER the children post-link (if any) have fired upon initialization.

What's this mean? A child might call addBrick before masonry has initialized.

https://github.com/angular/angular.js/wiki/Understanding-Directives#pre-vs-post-linking-functions

When I stumbled on this I assumed it was a standalone rewrite similar to UI Bootstrap.

Especially for those new to Masonry, It'd be helpful to note that this module has hard requirements for:

• jQuery
• packaged Masonry
• packaged imagesloaded

Hi !
After first load Google Chrome sticks all of the brick together, zoom-in-zoom-out in browser fix this problem.

Aslo there are issue with additional (unnecessary) space between some of the bricks. Please help me to find a solution.Thank you.

Hello,

I am playing around with Angular (I am new to Angularjs) and this masonry directive and I was wondering how to update masonry after typing text into a text field and initiating a filter?

I am also having a pagination and I would like to call the refresh function when I load a new page. Could somebody give me a tip please how to call the refresh function please?

Thanks, Jakub

I have noticed that the code base from angular-masonry is perfectly compatible with the Packery library just changing the naming of the directive.
I am writing this here just in case someone was interested in it.

So I just downloaded the zip and extracted it. I ran it via localhost and it did not work. Is there something wrong with running is localhost.

Howdy,

Running into an issue when trying to run this with 1.2rc1. Seems that maybe the require functionality has changed.

Error: [$compile:ctreq] Controller 'masonry', required by directive 'masonryBrick', can't be found!
    at http://code.angularjs.org/1.2.0rc1/angular.js:60:12
    at getControllers (http://code.angularjs.org/1.2.0rc1/angular.js:4948:19)
    at nodeLinkFn (http://code.angularjs.org/1.2.0rc1/angular.js:5075:35)
    at compositeLinkFn (http://code.angularjs.org/1.2.0rc1/angular.js:4607:15)
    at publicLinkFn (http://code.angularjs.org/1.2.0rc1/angular.js:4516:30)
    at ngRepeatAction (http://code.angularjs.org/1.2.0rc1/angular.js:16620:15)
    at Object.$watchCollectionAction [as fn] (http://code.angularjs.org/1.2.0rc1/angular.js:9737:11)
    at Object.Scope.$digest (http://code.angularjs.org/1.2.0rc1/angular.js:9831:27)
    at Object.Scope.$apply (http://code.angularjs.org/1.2.0rc1/angular.js:10039:24)

If you download the .zip file from the repo and extract and run it on a localhost AS-IS

you get these errors

TypeError: Object [object Object] has no method 'masonry'
TypeError: Object [object Object] has no method 'imagesLoaded'

And the images done load (probably due to the errors)
Everything seems to be included. Am I missing something?

Been stuck on this for a few hours now.

Uploaded an example here

http://shmeed.com/123/angular-masonry-master/

The index,html file in this uploaded version is identical to the index.htmlf file here http://passy.github.io/angular-masonry/

This happens if the images are already cached and causes the images to overlap until either a resize or a manual $(element).masonry('layout') is triggered.

I keep getting an error

screenshot of the first error

I think everything is loaded in the correct order

I would be grateful for any help.

Cool directive. I'm trying to get a layout to "re-layout" when adding items. Doesn't seem to be working for me. In your demo you're adding items to the end of a list, but I'm adding them at the beginning.

Is there a hook I can use to re-trigger the layout?

Any ideas?

I have some masonry-bricks that change their heights when clicked.
How to reload the layout of masonry div when one of the bricks change its height?
Sorry if this is obvious...

I was going to submit a pull request for this, but read in your section on contributing that you only want /src edited. Can it be bumped to 3.1.5?