[LRA-76] Research Aplication Display templates Created: 28/Jan/14  Updated: 05/Jun/14  Resolved: 05/Jun/14

Status: Resolved
Project: Liferay Apps
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Bug Priority: Major
Reporter: mcalvo Assignee: mcalvo
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 2d
Original Estimate: Not Specified


 Description   
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: http://www.liferay.com/documentation/liferay-portal/6.2/user-guide/-/ai/using-application-display-templates-liferay-portal-6-2-user-guide-07-en

 Comments   
Comment by jorge.rojas [ 28/Jan/14 ]
Working on it!!!
Comment by jorge.rojas [ 06/Feb/14 ]
<style>
.list-images{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    list-style:none;
}

.image-item {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: 250px;
    width: 700px;
    margin: 0 0 5px 0;
}

#lazy-loading{
    height: 255px;
    width: 750px;
    overflow-y: scroll;
    overflow-x: hidden;
}
</style>
<h1>Lazy Loading LRA-76</h1>

<div id="lazy-loading">
    <ul class="list-images">
        <li class="image-item" style="background: url(http://alloyui.com/carousel/img/1.jpg);"><!-- --></li>
        <li class="image-item" style="background: url(http://alloyui.com/carousel/img/2.jpg);"><!-- --></li>
        <li class="image-item" style="background: url(http://alloyui.com/carousel/img/3.jpg);"><!-- --></li>
    </ul>
</div>
  

<script>
AUI().use('node','node-base', function (A) {
/* #lazy-loading, container element */
var lazyLoading = A.one('#lazy-loading');
/* ul that containt the images */
var listImages = A.one('.list-images');
/* scrollTop of #lazy-loading */
var scrollTop = lazyLoading.get('scrollTop');
/* Div container #lazy-loading height */
var nodeHeight = lazyLoading.get('offsetHeight');

function appendImages(e){
    if(lazyLoading.get('scrollTop') > (scrollTop + nodeHeight)){
        var obj = A.Node.create('<li class="image-item" style="background: url(http://alloyui.com/carousel/img/4.jpg);"><!-- --></li>');
        listImages.append(obj);
        scrollTop += nodeHeight;
    }
}

lazyLoading.on('scroll',appendImages);


});
</script>
Comment by Alejandro Soto [X] (Inactive) [ 17/Mar/14 ]
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 https://github.com/asotog/liferay-application-display-templates
Comment by Alejandro Soto [X] (Inactive) [ 17/Mar/14 ]
https://github.com/asotog/liferay-application-display-templates#images-infinite-grid-viewvm
Comment by mcalvo [ 03/Jun/14 ]
Christopher find a way to pack this into a new app.
Comment by Christopher Jimenez [X] (Inactive) [ 05/Jun/14 ]
http://wiki.rivetlogic.com/display/LRA/Images+Infinite+Grid+Templates
I create a theme for this templates, in this moment only it's on my local, we need to request the creation of a new repo in the rivetlogic's github
Generated at Sat Feb 10 05:48:21 GMT 2024 using Jira 8.1.3#801003-sha1:6b6f07cffadda9a0d6efe24639daed8ce94dcdd6.