Support image srcset

[villanus]

If we can load images from Dom ( images in certain div) or with a class with full srcset support that would be great

[rsmith4321]

This uses background images. You can use media queries.

On Mon, Apr 4, 2016 at 5:37 AM, Frank notifications@github.com wrote: If we can load images from Dom ( images in certain div) or with a class with full srcset support that would be great

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub [https://github.com/jaysalvat/vegas/issues/111]

[jaysalvat]

Hello.

For now, if you need different slides depending on the screen size, you should set different slides array depending on the window width/height. Slides won't be refresh on window resizing.

[villanus]

thanks. so the background media query method wont work?

if we use window size to set array size, is there a way to replace images on window resize?

[jaysalvat]

You can set a new slide array with window is resized with the options method.

[villanus]

Its not the same as srcset which loads the right image based on screen size and ppi.

i an working on a solution and will share a pen when done

[amdad]

Hello @villanus and @jaysalvat

I tried like that. It work for first page load, but not reinitialize on window resize. Code is very redundant, but I don't know how make it more slick. If it is possible or not.

$(window).on('resize',function() {

// $("body").vegas('destroy');   I mean, destroy for reinitialize slides with differents sizes. But it don't work this way. Sliders don't work at all when destroy is on top, if inside IF statements then sliders are duplicated.

    if ($(window).width() <= 1024) {
        $("body").vegas({
            slides: [
                // smaller slides
            ],
            walk: function() {
                $(".current-slide").text($("body").vegas("current") + 1)
            }
        });
        $("body").vegas('shuffle');   
    }

    if ($(window).width() > 1024) {

        $("body").vegas({
            slides: [
                // bigger slides
            ],
            walk: function() {
                $(".current-slide").text($("body").vegas("current") + 1)
            }
        });
    $("body").vegas('shuffle');   
    }
});

$(document).ready(function() {
    $(window).trigger('resize');
});

$('a.back-prev').on('click', function () {
    $("body").vegas('options', 'transition', 'fade').vegas('previous');
});

$('a.back-next').on('click', function () {
    $("body").vegas('options', 'transition', 'fade').vegas('next');
}); 

[amdad]

But, after all I think pure CSS media queries background-image override will be much better solution for problem. So by default I would give Vegas just display placeholders for matter of settings and initialization. And override by CSS each slide.

Just don't now how it would be for lazy loading. Vegas support lazy load at all? It not clear to me in docs. But great is, that first image is loaded after it is downloaded. By CSS overriding I think I'll lost, that.. Or maybe not?

[jaysalvat]

Hello, A better way to write it would be:

function getSlides () {
    return $(window).width() > 768 ? [
        { src: 'http://placehold.it/1000x800?text=Large+1' },
        { src: 'http://placehold.it/1000x800?text=Large+2' },
        { src: 'http://placehold.it/1000x800?text=Large+3' }
    ] : [
        { src: 'http://placehold.it/500x400?text=Small+1' },
        { src: 'http://placehold.it/500x400?text=Small+2' },
        { src: 'http://placehold.it/500x400?text=Small+3' }
    ];
}

$('body').vegas({
    slides: getSlides()
});

$(window).on('resize',function () {
    $('body').vegas('options', 'slides', getSlides());
});

Caveats:

• The images won't change until the next slide.
• The preload option won't work on both arrays.

Improvement:

• Debouncing the resize function

[jaysalvat]

As usual, in:

$('body').vegas({
    slides: getSlides(),
    shuffle: true,
    walk: function () { ... }
});

but since you overwrite the slide array in the resize function, you must shuffle it in this function. Something like that:

$(window).on('resize',function () {
    $('body').vegas('options', 'slides', getSlides()).vegas('shuffle');
});

[amdad]

Oh, very thanks. This works flawless, even with different sets of slides for each IF width. Preload option is the one I will never use. Dynamic slides are like lazy load.

[amdad]

Last question, I didn't found method to display total number of slides. To have something like: 3/16 current/total. I just place total from PHP loop. But now with this responsive options I want it to change total dynamically. Of course I can do it from PHP with some JS. But maybe you know some more clean method for this?

[jaysalvat]

You can count your slide array. In the example above.

var total = getSlides().length;

Otherwise, this should be working too.

$('body').vegas('options', 'slides').length;

[amdad]

Ok, thank you.

[wcomgithub]

I would like to add a proposal here of which I think it could be a great enhancement, BUT also VERY USEFUL IF added by the great friendly developers to their original files. - Much, much better than JS solutions, because NO RELOAD REQUIRED on browser window resizing. - Maybe you could consider this?

As far as I see, actually, this GREAT improvement could be solved with only adding a class with a counter/image number to this one line / div: ORIGINAL (2.5.1) at line 455: $inner = $('<div class="vegas-slide-inner"></div>') .css('background-image', 'url("' + src + '")')

...

Small SOLUTION WOULD BE NOT MORE THAN to add one class to the dynamically changed divs with the image count number: $inner = $('<div class="vegas-slide-inner vegas-slide-NUMBER-OF-CURRENT-IMAGE"></div>') // background-image url only to be defined separately in a CSS file (see below) ...

This way, we could choose to define - without any modifications to the other code - all image URLs in CSS media queries like

.vegas-slide-NUMBER-OF-CURRENT-IMAGE1 { background-image:url('/img/fallback-image1.jpg)' } @media (max-width:640px) { .vegas-slide-NUMBER-OF-CURRENT-IMAGE1 { background-image:url('/img/fallback-image1.SMALL.jpg)' } }

Thanks also for your consideration to the developers! (And for the nice slider and very good job so far).