https://direktvertrieb.de/node_modules/jquery-background-slideshow/src/jquery-background-slideshow.js

1/**
2 * Author and copyright: Stefan Haack (https://shaack.com)
3 * Repository: https://github.com/shaack/jquery-background-slideshow/
4 * License: MIT, see file 'LICENSE'
5 */
6
7;(function ($) {
8    "use strict"
9    $.fn.backgroundSlideshow = function (options) {
10
11        this.each(function () {
12
13            var $container = $(this)
14            var $currentLayer = null
15            var $nextLayer = null
16            var currentImageIndex = 0
17            var nextImageIndex = 0
18            var preloadedImages = []
19            var config = {
20                delay: 5000,
21                transitionDuration: 3000,
22                onBeforeTransition: null,
23                onAfterTransition: null,
24                fixed: false,
25                images: []
26            }
27            for (var option in options) {
28                config[option] = options[option]
29            }
30            var transition = "opacity " + config.transitionDuration +  "ms ease-in-out"
31            var layerStyles = {
32                backgroundSize: "cover",
33                backgroundRepeat: "no-repeat",
34                backgroundPosition: "center center",
35                position: config.fixed ? "fixed" : "absolute",
36                left: 0,
37                right: 0,
38                bottom: 0,
39                top: 0,
40                zIndex: -1
41            }
42            var layerStylesTransition = {
43                transition: transition,
44                "-webkit-transition": transition,
45                "-moz-transition": transition,
46                "-o-transition": transition
47            }
48
49            function preLoadImage(index) {
50                if (!preloadedImages[index]) {
51                    preloadedImages[index] = new Image()
52                    preloadedImages[index].src = config.images[index]
53                }
54            }
55
56            function addLayer(imageSrc, withTransition) {
57                var $newLayer = $("<div class='backgroundSlideshowLayer'/>")
58                var thisLayerStyles = layerStyles
59                thisLayerStyles.backgroundImage = "url(" + imageSrc + ")"
60                $newLayer.css("opacity", "0")
61                $newLayer.css(thisLayerStyles)
62                if(withTransition) {
63                    $newLayer.css(layerStylesTransition)
64                }
65                var $lastLayer = $container.find("> .backgroundSlideshowLayer").last()
66                if ($lastLayer[0]) {
67                    $lastLayer.after($newLayer)
68                } else {
69                    $container.prepend($newLayer)
70                }
71                return $newLayer
72            }
73
74            function nextImage(withTransition) {
75                currentImageIndex = nextImageIndex
76                nextImageIndex++
77                if (nextImageIndex >= config.images.length) {
78                    nextImageIndex = 0
79                }
80                if ($nextLayer) {
81                    $currentLayer = $nextLayer
82                } else {
83                    $currentLayer = addLayer(config.images[currentImageIndex], withTransition)
84                }
85                if (config.onBeforeTransition) {
86                    config.onBeforeTransition(currentImageIndex)
87                }
88
89                $currentLayer.css("opacity", "1")
90                setTimeout(function() {
91                    if (config.onAfterTransition) {
92                        config.onAfterTransition(currentImageIndex)
93                    }
94                    preLoadImage(nextImageIndex)
95                }, withTransition ? config.transitionDuration : 0)
96                setTimeout(function() {
97                    $nextLayer = addLayer(config.images[nextImageIndex], true)
98                    cleanUp()
99                }, config.transitionDuration)
100            }
101
102            function cleanUp() {
103                var $layers = $container.find("> .backgroundSlideshowLayer")
104                if ($layers.length > 2) {
105                    $layers.first().remove()
106                }
107            }
108
109            $container.css("position", "relative")
110            nextImage(false)
111            setTimeout(function () {
112                nextImage(true)
113                setInterval(function () {
114                    nextImage(true)
115                }, config.delay + config.transitionDuration)
116            }, config.delay)
117
118        })
119    }
120}(jQuery))