Hi everyone, I am a bit stuck on this and was hoping you might be able to help.

When the user scrolls to the bottom of a page I would like to get the gallery partial and append it to an element on the page.

Here is the partial (called gallery.htm):

{% set gallery = OpenGalleryRenderer.renderOpenGallery(numAjaxRequests) %}
{% for image in gallery %}
     <li class='masonry-item'><a href='{{ image.large }}'><img src='{{ image.medium }}' ></a></li>
{% endfor %}

Here is the jQuery on the page:

$(window).scroll(function() {
    // if less than 500px from bottom..
    if($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
        // get partial and add it to the end of #masonry-container
    }
});

The really tricky part is that I need to pass an argument to the partial every time I call it so that i can load a different set of results. The argument would just be a counter that increments by 1 every time the request is made.

Any ideas how to go about this? The docs mostly give examples for form elements and I am quite new to jQuery and the ajax techniques.

Last updated 9 years ago