Как использовать Backstretch.js с viewportWidth?

Question

Я хотел бы выбрать изображения в зависимости от viewportWidth. К сожалению, я не могу заставить его работать. Отображается только "else"-case, поэтому функция if не работает. Вы можете помочь?

Мой код:

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
    });
}
});

Вы также можете найти его в JSFiddle.

Answer 1

Когда я попробовал это и отменил заказ

viewportWidth < 768 против versus < viewportWidth

viewportWidth < 1024 против 1024 < viewportWidth

кажется, работает правильно.