luis-almeida / unveil

A very lightweight jQuery plugin to lazy load images
4.16k stars 676 forks source link

Work with carousel slider? #50

Open webregie opened 10 years ago

webregie commented 10 years ago

I wonder if unveil works with a slider carousel?

Flaschenzug commented 9 years ago

hi, im not using a carusel, but a jquery based pagination. And when i change the items with the click on the pagination button, the new images are not loaded - only when i start so scroll.

Is there a solution for this problem?

terwey commented 9 years ago

Here's an example how it should work with Flexslider:

$(window).load(function() {
    $(".firstimage img").trigger("unveil");

    $('#slider').flexslider({
        before: function(slider) {
            $(slider.newSlides).find("img").trigger("unveil");
        }
    });
});

The important bit is first always unveil the first image. With Flexslider the important bit is in the before Callback.

If you are using the Flexslider in a duo with another for controlling it try this:

$(window).load(function() {
    $("#carousel img").trigger("unveil");
    $(".firstimage img").trigger("unveil");

    // The slider being synced must be initialized first
    $('#carousel').flexslider({
        controlNav: false,
        asNavFor: '#slider'
    });

    $('#slider').flexslider({
        controlNav: false,
        sync: "#carousel",
        before: function(slider) {
            $(slider.newSlides).find("img").trigger("unveil");
        }
    });
});

#slider is the big slider which is being controlled by the #carousel.