https://www.unionbankandtrust.com/scripts/scalable.min.js

1
2setImageSource();
3
4window.onresize = function(event) {
5    setImageSource();
6};
7
8function setImageSource(){
9    // Target all html with this class
10    var x = document.getElementsByClassName("js-scalable-image");
11    // get the curent window width
12    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
13
14    var largeImageDisplayWidthDefault  = 1200;
15    var mediumImageDisplayWidthDefault = 960;
16    var smallImageDisplayWidthDefault  = 500;
17
18    // Loop through all of the items with the specified class
19    for (i = 0; i < x.length; i++) {
20        var htmlTagType      = x[i].tagName;
21        var largeImageSrc    = undefined;
22        var largeImageWidth  = undefined;
23        var mediumImageSrc   = undefined;
24        var mediumImageWidth = undefined;
25        var smallImageSrc    = undefined;
26        var smallImageWidth  = undefined;
27        var newImageSrc      = "";
28
29        // Check if largeimage attribute exists
30        if (typeof x[i].dataset.imageLarge !== 'undefined') {
31            var largeImage  = x[i].dataset.imageLarge.split(',');
32            if (typeof largeImage[1] === 'undefined') {
33                console.error("Large image screen size not provided");
34                largeImageWidth = largeImageDisplayWidthDefault;
35            } else {
36                largeImageWidth = largeImage[1];
37            }
38            largeImageSrc = largeImage[0];
39        }
40
41        // Check if medium image attribute exists
42        if (typeof x[i].dataset.imageMedium !== 'undefined') {
43            var mediumImage = x[i].dataset.imageMedium.split(',');
44            if (typeof mediumImage[1] === 'undefined') {
45                console.error("Medium image screen size not provided");
46                mediumImageWidth = mediumImageDisplayWidthDefault;
47            } else {
48                mediumImageWidth = mediumImage[1];
49            }
50            mediumImageSrc = mediumImage[0];
51        }
52
53        // Check if small image attribute exists
54        if (typeof x[i].dataset.imageSmall !== 'undefined') {
55            var smallImage  = x[i].dataset.imageSmall.split(',');
56            if (typeof smallImage[1] === 'undefined') {
57                console.error("Small image screen size not provided");
58                smallImageWidth = smallImageDisplayWidthDefault;
59            } else {
60                smallImageWidth = smallImage[1];
61            }
62            smallImageSrc = smallImage[0];
63        }
64
65        if (typeof smallImageWidth !== 'undefined' && typeof mediumImageWidth !== 'undefined' && typeof largeImageWidth !== 'undefined') {
66            if(w <= smallImageWidth) {
67                newImageSrc = smallImageSrc;
68            } else if(w > smallImageWidth && w <= mediumImageWidth) {
69                newImageSrc = mediumImageSrc;
70            } else if(w > mediumImageWidth) {
71                newImageSrc = largeImageSrc;
72            }
73        } else if(typeof smallImageWidth !== 'undefined' && typeof mediumImageWidth !== 'undefined') {
74            if(w <= smallImageWidth) {
75                newImageSrc = smallImageSrc;
76            } else if(w > smallImageWidth) {
77                newImageSrc = mediumImageSrc;
78            }
79        } else if(typeof smallImageWidth !== 'undefined' && typeof largeImageWidth !== 'undefined'){
80            if(w <= smallImageWidth) {
81                newImageSrc = smallImageSrc;
82            } else if(w > smallImageWidth ) {
83                newImageSrc = largeImageSrc;
84            }
85        } else if(typeof mediumImageWidth !== 'undefined' && typeof largeImageWidth !== 'undefined'){
86            if(w <= mediumImageWidth) {
87                newImageSrc = mediumImageSrc;
88            } else if(w > mediumImageWidth) {
89                newImageSrc = largeImageSrc;
90            }
91        } else if(typeof smallImageWidth !== 'undefined') {
92            newImageSrc = smallImageSrc;
93        } else if(typeof mediumImageWidth !== 'undefined') {
94            newImageSrc = mediumImageSrc;
95        } else if(typeof largeImageWidth !== 'undefined') {
96            newImageSrc = largeImageSrc;
97        }
98
99        if(htmlTagType == 'IMG') {
100            x[i].src = newImageSrc;
101        } else {
102            x[i].style.backgroundImage    = "url('" + newImageSrc + "')";
103        }
104    }
105}