https://bridgeplusserver.com/js/cinema.js?v=1599467898

1function Cinema(container, options) {
2    var self = this;
3
4    // options = options || {};
5
6    self.isStopped = true;
7    self.currentEl = 0;
8    self.elements = [];
9    self.container = container;
10    self.options = $.extend(true, {}, {draggable: false, speed: 2000}, options);
11
12    self.init = function(elements, order){
13        order = order || [];
14        // hide all elements to show in cinema
15        if(elements && elements.length === 0) return;
16        if(order.length > 0){
17            $.each(order, function(i, item){
18                self.elements.push(elements[item]);
19            });
20        } else {
21            self.elements = elements;
22        }
23
24        $.each(self.elements, function(i, item){
25            $(item).css({'opacity': 0}).parent('td').css({'pointer-events': 'none'});
26        });
27
28        self.controls = $('<div class="cinema-control"></div>');
29        self.firstBtn = $('<i class="fa fa-step-backward disabled"></i>');
30        self.prevBtn = $('<i class="fa fa-backward disabled"></i>');
31        self.playBtn = $('<i class="fa fa-play-circle"></i>');
32        self.stopBtn = $('<i class="fa fa-pause-circle"></i>');
33        self.nextBtn = $('<i class="fa fa-forward"></i>');
34        self.lastBtn = $('<i class="fa fa-step-forward"></i>');
35        self.timelineControl = $('<div id="timeline-slider"><div class="ui-slider-handle"></div></div>');
36        self.timelineControl.slider({
37            range: 'min',
38            max: self.elements.length,
39            animate: true,
40            slide: function( event, ui ) {
41                if(self.isStopped){
42                    var val = ui.value;
43                    if(self.currentEl < val){
44                        for(var i = self.currentEl; i < val; i++){
45                            self.currentEl = i;
46                            self._playCurrent();
47                        }
48                    } else {
49                        for(i = self.currentEl; i > val; i--){
50                            self.currentEl = i;
51                            self._revertCurrent();
52                        }
53                    }
54                } else {
55                    return false;
56                }
57            }
58        });
59        self.controls.append(self.timelineControl).append(self.firstBtn).append(self.prevBtn)
60            .append(self.stopBtn).append(self.playBtn).append(self.nextBtn).append(self.lastBtn);
61
62        self.firstBtn.click(function(){
63            $(self.elements).animate({opacity: 0}, 'fast').parent('td').css({'pointer-events': 'none'});
64            self.currentEl = 0;
65            self._updateTimeline();
66            self.stop();
67        });
68        self.prevBtn.click(function(){self.prev()});
69        self.playBtn.click(function(){self.start()});
70        self.stopBtn.click(function(){self.stop()});
71        self.nextBtn.click(function(){self.next()});
72        self.lastBtn.click(function(){
73            $(self.elements).animate({opacity: 1}, 'fast').parent('td').css({'pointer-events': 'auto'});
74            self.currentEl = self.elements.length;
75            self._updateTimeline();
76            self.stop();
77        });
78
79
80        self.container.append(self.controls);
81        if(self.options.draggable){
82            self.controls.draggable();
83        }
84    };
85
86    self.next = function(){
87        if(self.nextAvailable()){
88            self._playCurrent();
89            return true;
90        } else {
91            return false;
92        }
93    };
94
95    self.nextAvailable = function() {
96        return self.isStopped && self.currentEl < self.elements.length;
97    };
98
99    self.prevAvailable = function(){
100        return self.isStopped && self.currentEl > 0;
101    };
102
103    self.prev = function(){
104        if(self.prevAvailable()){
105            self.currentEl--;
106            self._revertCurrent();
107            return true;
108        } else {
109            return false;
110        }
111    };
112
113    self.stop = function(){
114        self.playBtn.removeClass('active');
115        self.stopBtn.addClass('active');
116        self.isStopped = true;
117        self._checkButtonsStates();
118    };
119
120    self.start = function(){
121        self.isStopped = false;

122        self.stopBtn.removeClass('active');
123        self.playBtn.addClass('active');
124        self._play_auto();
125    };
126
127    // private methods
128    self._updateTimeline = function(){
129        self.timelineControl.slider('value', self.currentEl);
130        self._checkButtonsStates();
131    };
132
133    self._checkButtonsStates = function(){
134        if(!self.prevAvailable()){
135            self.prevBtn.addClass('disabled');
136            self.firstBtn.addClass('disabled');
137        } else {
138            self.prevBtn.removeClass('disabled');
139            self.firstBtn.removeClass('disabled');
140        }
141
142        if(!self.nextAvailable()){
143            self.nextBtn.addClass('disabled');
144            self.lastBtn.addClass('disabled');
145        } else {
146            self.nextBtn.removeClass('disabled');
147            self.lastBtn.removeClass('disabled');
148        }
149    };
150
151    self._play_auto = function(){
152        if(!self.isStopped){
153            self._playCurrent(function(){
154                self._play_auto();
155            });
156        }
157    };
158
159    self._playCurrent = function(callback){
160        var el = self.elements[self.currentEl];
161        if(el) {
162            self.currentEl++;
163            self._updateTimeline();
164            $(el).animate({opacity: 1}, self.options.speed, callback).parent('td').css({'pointer-events': 'auto'});
165        } else {
166            self.stop();
167        }
168    };
169
170    self._revertCurrent = function(callback){
171        var el = self.elements[self.currentEl];
172        self._updateTimeline();
173        if(el) $(el).animate({opacity: 0, 'pointer-events': 'none'}, self.options.speed, callback).parent('td').css({'pointer-events': 'none'});
174    };
175}