0

I would like to choose images depending on viewportWidth. Unfortunately I can't get it working. Only "else"-case ist showing, so the if function doesn't work. Can you help?

My code:

jQuery(document).ready(function ($) {

var viewportWidth = $(window).width();

if (768 < viewportWidth) {
    $.backstretch("http://static.pexels.com/wp-content/uploads/2014/09/beach-sunset-traces-2730-527x350.jpg", {
        duration: 3000,
        fade: 750
    });
} else if (1024 < viewportWidth) {
    $.backstretch("http://static.pexels.com/wp-content/uploads/2014/09/beach-ocean-sea-2728-527x350.jpg", {
        duration: 3000,
        fade: 750
    });
} else {
    $.backstretch("http://static.pexels.com/wp-content/uploads/2014/09/boat-ocean-railing-2719-527x350.jpg", {
        duration: 3000,
        fade: 750
    });
}
});

You can find it in a JSFiddle, too.

kabr
  • 1,249
  • 1
  • 12
  • 22

1 Answers1

-1

When I tried it and reversed the order

viewportWidth < 768 vs versus < viewportWidth

viewportWidth < 1024 versus 1024 < viewportWidth

it appears to work properly.

Ken Y-N
  • 14,644
  • 21
  • 71
  • 114
Jackie
  • 1