LazyLoad Plugin

Question

I am using jQuery Lazy Load to load thumbnails on a page I have a list of about 100+ thumbnails per page. This plug-in works perfect, until I introduce the plug-in Quick Pagination to display nine thumbnails at a time and give users the next and previous.

When one clicks on the Next or Previous, you get the gray placeholder image as the page Scroll is no longer a factor.

I tried different events and even created my own, this only loads all thumbnails even the ones below the threshold in the (next and previous).

Is there away to trigger the scroll event? Like this person has done > http://blog.3circlestudio.com/development/how-to-use-lazy-load-with-easy-slider-1-7/

I did try this as well and no luck.

$('.thumbs').lazyload({ placeholder:'/thumbnail.gif' });

Without Quick Pagination and scrolling the about works!

$('#thumbnails').paginate({ pager: $('div#pagination') });

Introducing the paginate works to generate a list of 9 thumbnails per, breaks lazyload. I guess what I am asking and can not figure out is how to call the thumbnails each time I click on the Next link.

Answer 1

I think these 2 plugins are diametrically opposed. I suggest using lazyload and the scrollto plugin. This should get you what you are looking for, just make sure to call the lazyload as follows

$('thumbs').lazyload({
    placeholder:'/thumbnail.gif',
    container:$('#thumbnails')
});

Answer 2

I just figured it out and it is working! I created a function within in Quick Pagination when the Next and Previous are called. In this function I inserted the following.

var scrollTop = function() {
    $('html, body').animate({scrollTop:0}, 'slow', function() {
        $(window).trigger('scroll');
    });
}

By placing the animate along with scroll top I fixed the issue to scroll the page, and by place $(window).trigger('scroll'); within the animate it triggers the scroll and loads the next set of photos. Hope this makes sense to anyone else - for my end it is working.

Yes!