https://www.norrtalje.se/Static/js/Abou.imageViewer.js?v=639237714360000000

1; (function (window, document, Abou, $, undefined) {
2
3    Abou.imageViewer = (function () {
4        var delay = 5000;
5        var currentItem = 0;
6        var updaterObject;
7        var imageBoxes = [];
8        var forceItemId;
9        var timer;
10        var paused = false;
11        var updater = function () {
12            var self = this;
13
14            // GO TO PREVIOUS SLIDE
15            self.showPreviousImage = function () {
16
17                var nextItem;
18
19                if (currentItem === 0) {
20                    nextItem = imageBoxes.length - 1;
21                } else {
22                    nextItem = currentItem - 1;
23                }
24
25                self.goToSpecific(nextItem);
26            }
27
28            // GO TO NEXT SLIDE
29            self.showNextImage = function () {
30
31                var nextItem;
32                // IF ON THE LAST ONE
33                if (currentItem === imageBoxes.length - 1) {
34                    nextItem = 0;
35                } else {
36                    nextItem = currentItem + 1;
37                }
38
39                self.goToSpecific(nextItem);
40            }
41
42            // GO TO SPECIFIC SLIDE 
43            self.goToSpecific = function (nextItem) {
44
45                if (timer)
46                    clearTimeout(timer);
47
48                var thisItem = currentItem;
49
50                // Move the current item backward
51                $(imageBoxes[currentItem]).css("z-index", 2);
52
53                // Move the next item forward and make it transperent
54                $(imageBoxes[nextItem]).css("z-index", 3);
55                $(imageBoxes[nextItem]).css("opacity", 0);
56                $(imageBoxes[nextItem]).css("position", "absolute");
57                $(imageBoxes[nextItem]).show();
58
59                $("#imageSelector .imagePickerSelected").removeClass("imagePickerSelected");
60                $("#imageSelector" + nextItem).addClass("imagePickerSelected");
61
62                //FADE IN AND OUT SLIDES
63                $(imageBoxes[currentItem]).velocity({
64                    opacity: 0
65                }, {
66                        duration: 1500,
67                        easing: "ease-out",
68                        complete: function () {
69                            if (forceItemId !== undefined && forceItemId !== thisItem) {
70                                $(imageBoxes[thisItem]).hide();
71                            }
72                        }
73                    });
74
75                $(imageBoxes[nextItem]).velocity({
76                    opacity: 1
77                }, {
78                        duration: 1500,
79                        easing: "ease-out",
80                        complete: function () {
81                            if (forceItemId !== undefined && forceItemId !== thisItem) {
82                                $(imageBoxes[thisItem]).hide();
83                            }
84                        }
85                    });
86
87                currentItem = nextItem;
88
89                if (!paused) {
90                    timer = setTimeout(function () { Abou.imageViewer.showNext() }, delay);
91                }
92            }
93            self.pauseSlider = function (elem) {
94
95                elem.toggleClass("active");
96
97                if (!paused) {
98                    clearTimeout(timer);
99                } else {
100                    timer = setTimeout(function () { Abou.imageViewer.showNext() }, delay);
101                }
102                paused = !paused;
103            }
104        }
105
106        // Public properties
107        return {
108            showNext: function () {
109                updaterObject.showNextImage();
110            },
111            showPrevious: function () {
112                updaterObject.showPreviousImage();
113            },
114            goToSpecific: function (nextItem) {
115                updaterObject.goToSpecific(nextItem);
116            },
117            pauseSlider: function (elem) {
118                updaterObject.pauseSlider(elem);
119            },
120            init: function () {
121                updaterObject = new updater();
122                imageBoxes = $(".imageBox");
123
124                // IF THERE ARE MORE THAN ONE ITEM IN THE PROPERTY = THERE IS A SLIDER
125                if (imageBoxes.length > 1) {
126                    $("li[id^='imageSelector']").each(function () {
127                        $(this).click(function () {
128                            forceItemId = parseInt($(this).attr("id").substr("imageSelector".length));
129                            Abou.imageViewer.goToSpecific(forceItemId);
130                        });
131                    });
132
133                    // CREATE AND ADD THE PREVIOUS SLIDE BUTTON TO THE SLIDER
134                    var $previousButton = $("<a href='#' class='slider-stepper previous'>");
135                    $previousButton.append($("<span class='sr-only'>Föregående bild</span><span class='previous-slide'></span>"));
136                    $previousButton.on("click", function (e) {
137                        e.preventDefault();
138                        Abou.imageViewer.showPrevious();
139                    });
140
141                    // CREATE AND ADD THE NEXT SLIDE BUTTON TO THE SLIDER
142                    var $nextButton = $("<a href='#' class='slider-stepper next'>");
143                    $nextButton.append($("<span class='sr-only'>Nästa bild</span>

143<span class='next-slide'></span>"));
144                    $nextButton.on("click", function (e) {
145                        e.preventDefault();
146                        Abou.imageViewer.showNext();
147                    });
148
149                    // ADD THE NEXT/PREVIOUS BUTTONS
150                    $(".sliderWrapper").append($previousButton, $nextButton);
151
152                    // CREATE AND ADD THE PAUSE BUTTON TO THE SLIDER
153                    var $pauseButton = $("<button class='pause-button'>Pausa bildspel</button>");
154                    $pauseButton.on("click", function (e) {
155                        e.preventDefault();
156                        Abou.imageViewer.pauseSlider($pauseButton);
157                    });
158
159                    var $pauseButtonHolder = $("<li class='pause'>");
160                    $pauseButtonHolder.append($pauseButton);
161
162                    // ADD THE PAUSE BUTTON
163                    $("#imageSelector").prepend($pauseButtonHolder);
164
165                    //SET THE HEIGHT OF ALL ELEMENTS EQUAL TO THE HEIGHEST ELEMENT IN SLIDER
166                    var maxHeight = 0;
167                    imageBoxes.each(function (index) {
168                        if ($(this).height() > maxHeight) {
169                            maxHeight = $(this).height();
170                        }
171                    });
172                    $('.sliderArea').height(maxHeight);
173
174                    timer = setTimeout(function () { Abou.imageViewer.showNext() }, delay);
175                }
176
177                //CHANGE HEIGHT ON WINDOW RESIZE
178                $(window).resize(function () {
179                    var heightArray = [];
180                    imageBoxes.each(function (index) {
181                        heightArray.push($(this).height());
182                    });
183                    var maxHeight = Math.max.apply(null, heightArray);
184                    $('.sliderArea').height(maxHeight);
185                });
186
187            }
188        };
189
190    }());
191
192}(this, this.document, window.Abou = window.Abou || {}, jQuery));