Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 UTC on 18 March 2024, to get $100 off your ticket.
Hey BMPanda
The module is awesome and works perfectly out of the box. Is there any way that it can play nicely with views infinite scroll? drupal.org/project/views_infinite_scroll. This would be the perfect combo to create sites like pinterest for example.
Again, thanks for the module.
UPDATE: This issue was first filed with the Masonry module, that explains why it seems to refer to itself (views infinite scroll).
Related Issue in Masonry #1808018: Make work with Views Infinite Scroll
Comment | File | Size | Author |
---|---|---|---|
#85 | 1806628-attach-masonry-insert-85.patch | 494 bytes | Sam152 |
#85 | 1806628-attach-masonry-insert-85.patch | 494 bytes | Sam152 |
#73 | support_masonry--1806628-73.patch | 1.68 KB | Dom. |
#72 | views_infinite_scroll-1.1-support_masonry-1806628-72.patch | 2.55 KB | guschilds |
#67 | views_infinite_scroll-support_masonry-1806628-67.patch | 2.05 KB | zanix |
Comments
Comment #1
mrmeech CreditAttribution: mrmeech commentedI agree that making this play nice with vews_infinite_scroll would be awesome! :)
Comment #2
BWPanda CreditAttribution: BWPanda commentedI was waiting for this feature to be requested ;)
I tried using both Masonry and Views Infinite Scroll (VIS) on my test site and found that the main reason they didn't work together was because VIS specifies the plugin names it works with (and obviously hasn't added the Masonry Views plugin to that list).
However, as Masonry simply builds on the default 'Unformatted' plugin, integration can be achieved by simply changing the VIS plugins so that the 'default' plugin becomes the default option when no other more-specific plugins are found. I've attached a patch for VIS that makes this possible.
However, even with the attached patch the two modules still don't work together properly as Masonry needs to re-organise the newly-added items to appear below the existing items somehow. I tried to get this to work, but couldn't. I believe some code needs to be added to the VIS javascript file somewhere...
I'm therefore moving this issue to the VIS issue queue so as to:
- Get the attached patch committed to support Masonry
- Work out how to re-load Masonry when new items are added
Feel free to move this back to Masonry (or open a new issue) if it turns out that I need to patch Masonry to get this to work, but from what I've tested I think it's the VIS maintainer that needs to address this.
Comment #3
rickharington CreditAttribution: rickharington commentedBWPanda
I'm not so sure that it needs to be fixed. I've just implemented your patch and it works like a charm! Tested in Firefox, Chrome and IE!
Man you are a legend byond belief!
Thanks
Comment #4
dwkitchen CreditAttribution: dwkitchen commentedJust had a quick try of this patch, I may have had the same issue.
The after the initial page load it looks good, scrolling down the extra content is loaded by VIS it is placed on top of the original content. On the second load of extra content it is placed below the the first set of VIS content. Subsequent VIS loaded content is placed correctly.
This may be a theme based issue.
Comment #5
funature CreditAttribution: funature commentedthere will be an overlapping issue if the items are with image. A temporary solution is http://drupal.org/node/970870#comment-5945292. Like @Carlitus said, maybe a not elegant method.
Put after the 47 line of views_infinite_scroll.js
$(content_selector).masonry( 'reload' );
Before
After
i hope the maintainer could make the change for the both masonry module.
Comment #6
dwkitchen CreditAttribution: dwkitchen commentedThis worked to stop the first page load from overlapping. However now some subsequent items are over lapping and once the first page load happens all the other pages load as well.
Comment #7
funature CreditAttribution: funature commentedyou are right, i'm also facing this issue. do you have any solution?
Comment #8
mErilainen CreditAttribution: mErilainen commentedI would like to make this work with Views Accordion (http://drupal.org/project/views_accordion) and the patch makes it possible to load the infinite scroll JS, but after loading more results they don't get inside the accordions because the views accordion is not doing anything for the new results.
I have also applied the patch from #981368: Support views grouping to make this module work with grouping. It would be awesome to make the grouping work and also Masonry, would open a lot of nice use cases for this module!
Comment #9
funature CreditAttribution: funature commentedmaybe this post is helpful, http://stackoverflow.com/questions/9766515/imagesloaded-method-not-worki...
maybe it should be done similar like this:
because i'm not a coder and know almost nothing about jquery, so it will be great if somebody can fix this!
Comment #10
logaritmisk CreditAttribution: logaritmisk commentedI would suggest to do this:
And patch masonry_views.module on line 73 with:
Comment #11
TelFiRE CreditAttribution: TelFiRE commentedI mean it sounds like a really simple solution and looks like it has been solved for quite a while? Why can't someone just commit it? Pretty please?
Comment #12
kyletaylored CreditAttribution: kyletaylored commentedI'm just converting logaritmisk's into a patch, it worked for me. I'll post the Masonry patch in their issue queue as well.
Comment #13
BWPanda CreditAttribution: BWPanda commentedHere's an updated patch that:
Comment #13.0
BWPanda CreditAttribution: BWPanda commentedUpdated issue summary.
Comment #14
jibranPatch looks good works well #1808018-3: Make work with Views Infinite Scroll
Comment #15
pierrelord CreditAttribution: pierrelord commentedWorks great. Big thank you :)
Comment #16
stupiddingo CreditAttribution: stupiddingo commentedBrilliant! Works great with Omega.
Comment #17
jibran#1808018: Make work with Views Infinite Scroll is fixed yay! so can we please fix this as well :)
Comment #18
vinoth.3v CreditAttribution: vinoth.3v commentedHere, with latest version of both Infinite scroll, Masonry and jquery 1.8: (Omega theme)
any Idea?
Comment #19
nyleve101 CreditAttribution: nyleve101 commentedI am also using the omega theme and experiencing the same issues.
Comment #20
vinoth.3v CreditAttribution: vinoth.3v commentedForget to mention, Omega version is 4.x
Comment #21
jibranCan you test it against core jQuery 1.4.4? If it is working fine then it is out of scope for this issue we have to create new issue for jQuery 1.8.
Comment #22
vinoth.3v CreditAttribution: vinoth.3v commentedWith Garland theme and Jquery Update module disabled, it works with Table, Grid display formats. But ajax loading is not even showing with Masonry grid display.
Chrome inspector show JS error.
Comment #23
jibranCan you attach your view as well?
If you are getting error after applying the patch that means patch need work. Usually active status mean no activity and we just started the issue. After issue got patch it will be need work, need review or RTBC. So changing the status to need work.
Comment #24
vinoth.3v CreditAttribution: vinoth.3v commentedAfter applying the patch?
Oh wait. I thought the patch is already committed to git.
It works great now. Thank you for the patch.
Comment #25
btopro CreditAttribution: btopro commentedpatch in #13 works great. RTBC?
Comment #26
Deg CreditAttribution: Deg commentedI'd recommend adding the current and next variables to the load function (as defined in the autopager.js docs at http://lagoscript.org/jquery/autopager/documentation) so this information is available in the trigger.
Comment #27
jpitassi CreditAttribution: jpitassi commentedThe issue that I still have is that masonry is not reloaded or appended so my next page of results just end up overlapping each other. Looking at both Masonry and Infinite Scroll module, I can not see a way for Infinite scroll to reload masonry without explicitly calling masonry. Because I am only using infinite scroll for 1 view on my site and just prototyping something I made a quick and dirty solution. I first remove the infinite scroll js from the scripts array in my theme template.php and add in a custom js file:
Then I copy the views_infinite_scroll/js/views_infinite_scroll.js to THEME/js/views_infinite_scroll_custom.js
Then add on line 45 of views_infinite_scroll_custom.js add $(content_selector).masonry( 'reload' );
That will reload masonry after the infinite scroll has loaded the objects in the list. I am just prototyping so this will work for me, for now.
Comment #28
CarlosML CreditAttribution: CarlosML commentedI'm having the same problem as previous post: even applying patches, when Views Infinite Scroll adds more images, they're overlapped with already loaded ones.
I'm by no means a programmer or an expert, but reading jQuery Masonry documentation I found it has imagesLoaded plugin built-in. So, I wrapped the views_infinite_scroll_updated as this:
And now it seems its working OK. It is necessary to make sure that images are already loaded before calling 'reload' or I'm completely wrong headed?
Thanks!
Comment #29
andrew smith CreditAttribution: andrew smith commentedFor total beginners with patches (like me) – on Mac using Terminal - #13 patch works, BUT NOTE: it patches two different files in different locations at once so is tricky.
Using the usual method for applying patches for Mac using Terminal, it won't work: you need to divide the patch using TextEdit (or whatever) into two separate patches. One is applicable to js/views_infinite_scroll.js the other is for views_plugin_pager_infinite_scroll.inc .
Then patch both patches in the usual Terminal way. Apologies if there is a more sensible method; I don't know it.
Comment #30
stupiddingo CreditAttribution: stupiddingo commentedSo to clarify my earlier delight. Works brilliantly with Omega 7.x-3.1 and as #29 states there are two patches from #13 that must be applied for correct behavior.
Comment #31
bradallenfisher CreditAttribution: bradallenfisher commentedIs there any new insight into this. I have applied patches, however when using images in a view with masonry and vis, I get overlapping.
I am using Omega 3.x.
This doesn't happen on first load.
This clears up on refresh.
Looks like more than one "page" is loaded when i start to scroll. Like it seems like two many pages are being pulled in. Could that be the cause of the overlapping?
I will test whatever you need me to. This is stopping me from using the combo of these two module in production.
Thanks.
Comment #32
bradallenfisher CreditAttribution: bradallenfisher commentedIt seems like all subsequent pages are being loaded at once on scroll... This is chrome.
Comment #33
Anonymous (not verified) CreditAttribution: Anonymous commentedI am experiencing the same issues. It seems to load 1-2 pages at a time on the first scroll. Sometimes there is overlap, other times not so.
Comment #34
dddave CreditAttribution: dddave commentedPatch in #13 works fine for me in conjuncture with the latest 1x dev of masonry. No other tweaking necessary. Tested with Chrome and FF.
Comment #35
miik4 CreditAttribution: miik4 commented#27:
I didn't see this functionality attached to Masonry / Infinite Views Scroll, and tried this solution.
Works great, and doesn't cause problems when replacing views_infinite_scroll.js with views_infinite_scroll_custom.js file ;)
Thanks!
Comment #36
capellicIn addition to the patch in #13, I had to change the code in masonry_views.module, specifically the block of "Initialize Masonry" code starting at line 57. The problem is that the code runs the Masonry script before the images were loaded on scroll.
I wrapped it in jQuery(document).ready(function(){ ... }); and also wrapped the reload in $container.imagesLoaded(function () { ... }); Here's the whole file to save confusion:
Comment #37
xaqroxI had to make the same modifications to Masonry as capellic. Gonna reference his comment in the Masonry queue so the infinite scroll patch in #13 stays in the right place.
Comment #38
xaqroxActually I think this was my problem: #1983582: Allow default row classes to be disabled
Comment #39
metastate CreditAttribution: metastate commentedI couldn't get Views Infinite Scroll to work using the latest versions of Views (7.x-3.7), Masonry API (7.x.2.0), Masonry Views (7.x.1.0) and Views Infinite Scroll (7.x.1.1). I am using jQuery v1.7.1, jQuery Masonry v2.1.08, jQuery.autopager v1.0.0.
Here is my troubleshooting sequence (long story short, I needed the fixes in #13 and #27 above)...
Masonry API - Make work with Views Infinite Scroll - patch in #3: https://drupal.org/node/1808018#comment-6954014
This patch doesn't apply to the latest version of Masonry Views, so I skipped it.
Views Infinite Scroll - Support Masonry module - patch in #13:
https://drupal.org/node/1806628#comment-6954012
NOTE: This patch applies to two files - views_infinite_scroll.js and views_plugin_pager_infinite_scroll.inc
At this point, Infinite Scroll works now, but when the scroll loads, all of the images are in a single column on the left hand side, with some overlapping at the top.
Views Infinite Scroll - Support Masonry module - soluton in #27:
https://drupal.org/node/1806628#comment-7068082
I just modified views_infinite_scroll.js instead of creating a custom.js file.
HUZZAH!! It works.
Phew...
Comment #40
nuncius CreditAttribution: nuncius commentedHey metastate, thanks a lot!
I can confirm that this method described in #39 works perfectly, Finally after severeal days of trying, my infinite scroll finally works with masonry.
Comment #41
mohamadaliakbari CreditAttribution: mohamadaliakbari commentedin addition to #27 its better to reload masonry only if its necessary:
So still you can use infinite scroll without masonry.
Comment #42
charlie charles CreditAttribution: charlie charles commentedwould let Let me know please?
what's the command to install this patch with Drush?
Many Thanks
Comment #43
dixon_Comment #44
dixon_Here's an updated and slightly more generic patch inspired by @logaritmisk in #10. This patch works great with the new Masonry 7.x-2.x after applying the new patch at #1808018-12: Make work with Views Infinite Scroll.
Comment #45
rteijeiro CreditAttribution: rteijeiro commentedTested #44 patch and #1808018-12: Make work with Views Infinite Scroll patch and now it works like a charm.
Comment #46
heddn+1 on RTBC
Comment #47
Andre-B+1 RTBC just tested both patches, works like a charm. Hope that there will be a stable/ dev release soon
Comment #48
Mavro CreditAttribution: Mavro commentedHi Everyone,
I'm working on a project that uses both Masonry and Views Infinite Scroll and had the same overlapping issues.
After reading through the comments and trying a few of the suggested solutions, Dixon's instructions on comment #44 worked for me:
1. Applied this patch to the Masonry API module:
https://drupal.org/files/1808018-masonry2-vis-11.patch
2. Applied this patch to the Views Infinite Scroll module:
https://drupal.org/files/1806628-vis-masonry-43.patch
For those who need to learn how to apply patches, here's a useful tutorial: http://www.youtube.com/watch?v=i-oe7_qHreY
Everything appears to be working correctly now. Thank you, everyone! Hopefully, new releases of both Views Infinite Scroll and Masonry API will be released that play nice with each other.
Lastly, I don't post often, so please let me know if I'm referencing things incorrectly. I'll update my post.
Comment #49
bwoods CreditAttribution: bwoods commentedAgreed ... #44 works for me too. I should also note that since my masonry items are variable width, I checked the box in the view settings to load the images first. This way, masonry resizes properly. Thanks!
Comment #50
Geizt CreditAttribution: Geizt commentedAfter applying #1806628-vis-masonry-43.patch the switch case concerning the "list" plugin, forces the wrapper class to be set in order to create a proper content selector.
If no wrapper class is set the infinite scroll JS will not be able to attach the result of the AJAX request to the existing list being displayed.
This patch checks if a wrapper class exists and only then uses it in the creation of the content selector, otherwise a fall-back is used instead that doesn't require a wrapper class.
Comment #50.0
Geizt CreditAttribution: Geizt commentedUpdated issue summary.
Comment #51
MHz CreditAttribution: MHz commentedAfter applying the two patches from #48 things still don't work for me, a pager appears at the bottom of the view, and when you scroll down new items load but are layered under the old ones, e.g http://i.imgur.com/rOPHOrQ.png
Comment #52
Mavro CreditAttribution: Mavro commentedMHz, which version of modules (Infinite Scroll and Masonry) are you using? I can compare with my project.
Comment #53
MHz CreditAttribution: MHz commentedI've managed to fix my problem.
Comment #54
rteijeiro CreditAttribution: rteijeiro commentedTested #50 patch and it seems to fix the problem with item lists in views. It should be added to main patch in #44.
Comment #55
alesel CreditAttribution: alesel commentedHas anybody problems with iOS devices?
Comment #56
alesel CreditAttribution: alesel commentedOn Android have also troubles.
I found out that it works only after zooming.
Comment #57
morleman CreditAttribution: morleman commentedOne question, when scrolling back up via JavaScript button or mouse is it possible to "reset" it again when you reach the top? So if they scroll back down they re-encounter this feature?
Comment #58
pacome CreditAttribution: pacome commentedThanks a lot !
great result with
patch on https://drupal.org/comment/7940483#comment-7940483 (this issue, #50)
patch on https://drupal.org/comment/8472445#comment-8472445 (V2 on #24)
[edit] : it seems that the javascript used inside the view is not loaded after the first page (ie : slideshows will be loaded on 1st page, not on the next ones..)
it's probably related to those other issues : https://drupal.org/node/2164235 and https://drupal.org/node/2122273
Comment #59
xaa CreditAttribution: xaa commentedpatch #44 and #50 working on desktop. thanks
Comment #60
spkrs CreditAttribution: spkrs commentedI'm removing my request as I posted it in the wrong thread. Apologies for the newbie move.
Comment #61
kopeboy CreditAttribution: kopeboy commentedAre the working patches still needed for this to work or have they been included already?
Months have passed and this isn't Fixed yet.
Comment #62
zanixI have patch #44 and #50 along with a patch for Masonry #2022371-23: Support for Masonry 3.0? and I have it working.
Comment #63
kopeboy CreditAttribution: kopeboy commentedI successfully applied
#2022371-23: Support for Masonry 3.0?
to Masonry dev, but these #44 and #50 doesn't seem to apply to VIS. Is it because the latest dev version as them already? I am a noob.. sorry(to clarify, in the first case I get "patch applied cleanly", in 2nd and 3rd I get no message on my console when trying to apply patch)
EDIT: Ok I had to use
patch -p1 <
in this case, but I got this error on the 1806628-vis-masonry-43.patchand this when applying 1806628-50.patch
Why is that?
Comment #64
dddave CreditAttribution: dddave commentedQuick guess: The latest dev changed too much (looking at the commits it seems likely). Have you an older dev saved somewhere to test the patches? (Better yet: Update the patches, but that might be a bit much for now ;))
I have it working nicely with older versions of masonry and VIS and never updated them to avoid this scenario. Nothing here has been committed so far.
Comment #65
kopeboy CreditAttribution: kopeboy commentedUnfortunately I don't have old versions. I restarted downloading the dev version once more and reapplying patches, both for Masonry API and VIS.
Support for Masonry 3.0 > ok
Patch 43 here > ok
Patch 50 here > error:
Comment #66
likewhoa CreditAttribution: likewhoa commentedpatch needs a re-roll that's all.
Comment #67
zanixRe-roll and combination of patches #43 and #50 applied to 7.x-1.x-dev
Comment #68
newme154 CreditAttribution: newme154 commentedHey Guys,
Having the toughest time where to put these libraries. I have them under sites/all/libraries/imagesLoaded/imagesloaded.pkgd.min
and
sites/all/libraries/Masonry/masonry.pkgd.min with the same outcome. Nothing. In views it says "These options have been disabled as the jQuery Masonry plugin is not installed." However, I know its there.
Any ideas?
Comment #69
zanixThe library files need to look like this (no capitol M or L)
Comment #70
TheRealDeal CreditAttribution: TheRealDeal commentedAfter applying dixon's patches that are mentioned in #44 the views infinite scroll and masonry were now working together in sync but then the animations that I had on the page that used the jquery zoom plugin were all broken, I have also tried applying patch in post #50 and thought that it had resolved the issue but it hasn't, after i scroll below the first 'page' and the new items load in the jquery zoom script stops working correctly, does anyone know why this is happening?
Comment #71
guschilds CreditAttribution: guschilds at Chromatic commentedEDIT: Forgot to attach a patch. See #72. :)
Comment #72
guschilds CreditAttribution: guschilds at Chromatic commentedThe attached patch is the same as the one in #67, but applies to the 7.x-1.1 release. I'm adding it here so I can reference it with Drush Patchfile until the next release is made for this module. Thanks everyone!
Comment #73
Dom. CreditAttribution: Dom. commentedHi !
This inspired by patch #67 applied to latest (as per 19/07/2015) 7.x-1.x-dev branch. This is important to get Masonry Views module (and possibly others based on the unformatted list style) compatible with VIS module.
NOTE: It is not necessary to trigger a special event "change" as per patch #67 since DrupalBehaviors are already triggered in the load method here, and that is what they are made for.
Thanks
Comment #74
stevieb CreditAttribution: stevieb commentedThe patch in #72 works beautifully for me ... thanks
Comment #75
Dom. CreditAttribution: Dom. commentedJust push for the patch ! Because Masonry Views module users needs it !
Comment #76
2pha#72 worked for me.
I then just needed to add this to my sites js.
The masonry views module should probably listen for these change events and reload if necessary (should also check target of event as to not reload on change events on something inside the view).
Comment #77
knalstaaf CreditAttribution: knalstaaf commented#73 works perfectly for me (no need for extra js)!
(There's a patch to hide the pager as well, which plays well with Masonry)
Comment #78
knalstaaf CreditAttribution: knalstaaf commentedComment #79
alexit873 CreditAttribution: alexit873 commentedHi, i'm sorry to open again this request but i think it doesnt work anymore the fix on #73,
because the view_plugin_pager_infinite_scroll.inc changed and i can't find any of the patched lines on the new file.
Here is my page with the problem:
http://vidiall.com/node/133#filter
Please help so the new items will fit like they should
Comment #80
errand CreditAttribution: errand commented#73 works perfectly on 7x-1-dev version
Comment #81
dddave CreditAttribution: dddave commentedUgh, why was a rc1 rolled out at least a commiters review of this patch. :/
Comment #82
Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commentedRC1 is rolled out for 7.x-2.x. This patch can be committed to 7.x-1.x, but if it's a widely requested feature it would be nice to see it in the latest version.
Comment #83
szeidler CreditAttribution: szeidler at Ramsalt Lab commentedI can confirm both, that the masonry effect is working using the old 7.x-1.x branch with patch #73
and the new 7.x-2.x branch
Comment #84
dddave CreditAttribution: dddave commentedUgh myself for overlooking the version # and conveniently forgetting that I have it tested on 2x a while ago. Sorry.
Comment #85
Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commentedI agree that #73 is on the right train of thought. Behaviors should be attached and everything should know what to do with it from there. I have not tested this patch but the fix could be in this direction. It's possible the AJAX system already calls this for us, will have to dig into this deeper.
Comment #86
ShaneOnABike CreditAttribution: ShaneOnABike commentedPatch #73 works really great with the latest Masonry and Masonry Views
Comment #87
Honza Pobořil CreditAttribution: Honza Pobořil as a volunteer commented7.x-1.x will receive no work. Migrate to 7.x-2.x.