This topic contains 1 reply, has 2 voices, and was last updated by  Kharis Sulistiyono 3 years ago.

Gallery Grid — Load data and dynamically refresh

  • Good Afternoon,

    We currently have our customer site running with Toranj:

    El Subsuelo

    Our purchase code is: 2e525898-d3ad-48b3-9eb9-42bf3bbdc4f7

    We are looking to make a new change to the site, in the following manner.

    We want to incorporate the Gallery Grid view for photos:

    Gallery Grid

    However, the problem is, our client has many photos, so if we try to load them all at once, we run into trouble. To solve this, I set up the page to start by loading only 12 images.

    Later, when the user scrolls to the bottom, we load 12 more, and so on:


    var $win = $(window);

    var ajax = null;

    $win.scroll(function () {if ($win.height() + $win.scrollTop()

    == $(document).height()) {

    if ( ajax) ajax.abort();

    ajax = $.ajax({

    url: '/api/v1/photo?offset='+ $('body').attr('data-offset')+'&limit=12',

    success: function( photos ){

    var $body = $('body');

    $body.attr('data-offset',parseInt($body.attr('data-offset') )+12);

    $.each( photos, function(index,photo){

    $('.grid-portfolio').append(

    (Handlebars.compile($('#photo').html()))(photo)
    );

    });

    $body.trigger('custom.trigger');
    }
    })
    }
    });

    This works great, except for one problem: it breaks the Gallery, since the JavaScript has already been run to set up the Gallery.

    So we are looking for a solution.

    Do we need to destroy the Grid, and rebuild it? If so, what method can we do to destroy it?

    Or, can we just add the new photos to grid? How would we do that?

    I realize this may end up being a lot of custom work, so if you want to offer to help, under a paid project, I am willing to hear your proposal.

    Thanks again for your help, I look forward to a prompt response.

    Hello there,

    Thank you for posting in.

    I was thinking that you should need to initialize grid function after limit load. Fistly, destroy default grid by removing portfolios.init();. Then initialize it in your code by placing portfolios.init(); after each 12 images loaded.

    If it didn’t work, there is a jQuery plugin does the objective alternatively. Here is how to make it works with current grid function.

    var lazyInstance = jQuery("img.lazy").lazy({
    		delay: 200,
    		scrollDirection: 'vertival',
    		afterLoad: function(element) {
    			portfolios.init();
    		}
    });
    

    I hope this reply helps. I’ll wait to hear back from you regarding your stats.

    Regards,
    Kharis

The topic ‘Gallery Grid — Load data and dynamically refresh’ is closed to new replies.