https://issues.rivetlogic.com This file is an XML representation of an issue en-us 8.1.3 801003 13-09-2019 https://issues.rivetlogic.com/browse/LRA-76 Liferay Apps Add a template to create a infinite-scroll gallery (or Facebook-style), instead of the regular using-arrow-buttons pagination, this reference could be useful: <a href="http://www.liferay.com/documentation/liferay-portal/6.2/user-guide/-/ai/using-application-display-templates-liferay-portal-6-2-user-guide-07-en">http://www.liferay.com/documentation/liferay-portal/6.2/user-guide/-/ai/using-application-display-templates-liferay-portal-6-2-user-guide-07-en</a> LRA-76

Research Aplication Display templates

Bug Major Resolved Fixed mcalvo mcalvo Tue, 28 Jan 2014 09:02:08 -0500 Thu, 5 Jun 2014 11:20:54 -0400 Thu, 5 Jun 2014 11:20:54 -0400 0 4 0d 2d Working on it!!! &lt;style&gt; <br/> .list-images{ <br/> &nbsp;&nbsp;&nbsp;&nbsp;margin: 0 0 0 0; <br/> &nbsp;&nbsp;&nbsp;&nbsp;padding: 0 0 0 0; <br/> &nbsp;&nbsp;&nbsp;&nbsp;list-style:none; <br/> } <br/> <br/> .image-item { <br/> &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-left-radius: 6px; <br/> &nbsp;&nbsp;&nbsp;&nbsp;border-bottom-right-radius: 6px; <br/> &nbsp;&nbsp;&nbsp;&nbsp;border-top-left-radius: 6px; <br/> &nbsp;&nbsp;&nbsp;&nbsp;border-top-right-radius: 6px; <br/> &nbsp;&nbsp;&nbsp;&nbsp;height: 250px; <br/> &nbsp;&nbsp;&nbsp;&nbsp;width: 700px; <br/> &nbsp;&nbsp;&nbsp;&nbsp;margin: 0 0 5px 0; <br/> } <br/> <br/> #lazy-loading{ <br/> &nbsp;&nbsp;&nbsp;&nbsp;height: 255px; <br/> &nbsp;&nbsp;&nbsp;&nbsp;width: 750px; <br/> &nbsp;&nbsp;&nbsp;&nbsp;overflow-y: scroll; <br/> &nbsp;&nbsp;&nbsp;&nbsp;overflow-x: hidden; <br/> } <br/> &lt;/style&gt; <br/> &lt;h1&gt;Lazy Loading <a href="https://issues.rivetlogic.com/browse/LRA-76" title="Research Aplication Display templates" class="issue-link" data-issue-key="LRA-76"><strike>LRA-76</strike></a>&lt;/h1&gt; <br/> <br/> &lt;div id=&quot;lazy-loading&quot;&gt; <br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=&quot;list-images&quot;&gt; <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;image-item&quot; style=&quot;background: url(<a href="http://alloyui.com/carousel/img/1.jpg);">http://alloyui.com/carousel/img/1.jpg);</a>&quot;&gt;&lt;!-- --&gt;&lt;/li&gt; <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;image-item&quot; style=&quot;background: url(<a href="http://alloyui.com/carousel/img/2.jpg);">http://alloyui.com/carousel/img/2.jpg);</a>&quot;&gt;&lt;!-- --&gt;&lt;/li&gt; <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;image-item&quot; style=&quot;background: url(<a href="http://alloyui.com/carousel/img/3.jpg);">http://alloyui.com/carousel/img/3.jpg);</a>&quot;&gt;&lt;!-- --&gt;&lt;/li&gt; <br/> &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt; <br/> &lt;/div&gt; <br/> &nbsp;&nbsp; <br/> <br/> &lt;script&gt; <br/> AUI().use(&#39;node&#39;,&#39;node-base&#39;, function (A) { <br/> /* #lazy-loading, container element */ <br/> var lazyLoading = A.one(&#39;#lazy-loading&#39;); <br/> /* ul that containt the images */ <br/> var listImages = A.one(&#39;.list-images&#39;); <br/> /* scrollTop of #lazy-loading */ <br/> var scrollTop = lazyLoading.get(&#39;scrollTop&#39;); <br/> /* Div container #lazy-loading height */ <br/> var nodeHeight = lazyLoading.get(&#39;offsetHeight&#39;); <br/> <br/> function appendImages(e){ <br/> &nbsp;&nbsp;&nbsp;&nbsp;if(lazyLoading.get(&#39;scrollTop&#39;) &gt; (scrollTop + nodeHeight)){ <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var obj = A.Node.create(&#39;&lt;li class=&quot;image-item&quot; style=&quot;background: url(<a href="http://alloyui.com/carousel/img/4.jpg);">http://alloyui.com/carousel/img/4.jpg);</a>&quot;&gt;&lt;!-- --&gt;&lt;/li&gt;&#39;); <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listImages.append(obj); <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollTop += nodeHeight; <br/> &nbsp;&nbsp;&nbsp;&nbsp;} <br/> } <br/> <br/> lazyLoading.on(&#39;scroll&#39;,appendImages); <br/> <br/> <br/> }); <br/> &lt;/script&gt; After doing research about application templates in liferay 6.2, was able to implement the infinite scrolling with lazy loading using ajax and liferay services utility for js, this template was created for asset publisher, further documentation was placed here <a href="https://github.com/asotog/liferay-application-display-templates">https://github.com/asotog/liferay-application-display-templates</a> <a href="https://github.com/asotog/liferay-application-display-templates#images-infinite-grid-viewvm">https://github.com/asotog/liferay-application-display-templates#images-infinite-grid-viewvm</a> Christopher find a way to pack this into a new app. <a href="http://wiki.rivetlogic.com/display/LRA/Images+Infinite+Grid+Templates">http://wiki.rivetlogic.com/display/LRA/Images+Infinite+Grid+Templates</a> <br/> I create a theme for this templates, in this moment only it&#39;s on my local, we need to request the creation of a new repo in the rivetlogic&#39;s github Development Rank 0|i00cjb: Rank (Obsolete) 2032