https://sculptglass.co.uk/js/fws2.js

1function fws2() {
2
3    "use strict";
4
5    var glob = {
6        instance: "",
7        cs: 0,
8        pause: 6000,
9        duration: 750
10    };
11
12    this.init = function(params) {
13        glob.instance = "#" + params.unique;
14        
15        /* Append css to header */
16        jQuery("#fws-style-"+params.unique).children().appendTo("head");
17        jQuery("#fws-style-"+params.unique).remove();
18        
19        glob.pause      = parseInt(params.pause,10);
20        glob.duration   = parseInt(params.duration,10);
21        glob.hoverpause = parseInt(params.hoverpause,10);
22        glob.bullets    = parseInt(params.bullets,10);
23        glob.arrows     = parseInt(params.arrows,10);
24        
25        /* Init */
26        content.init();
27        display.bindControls();
28        controls.bindControls();
29    };
30
31    var display = {
32        /* Resize function */
33        resize: function() {
34            jQuery(glob.instance).css({height: jQuery(glob.instance).find(".slide:first").height()});
35            controls.position();
36        },
37        /* Bind resize listener */
38        bindControls: function() {
39            jQuery(window).resize(function() {
40                display.resize();
41            });
42        }
43    };
44
45    var controls = {
46        /* Adjust buttons position */
47        position: function() {
48            jQuery(glob.instance + " .slidePrev," + glob.instance + " .slideNext").css({
49                top: jQuery(glob.instance).height() / 2 - jQuery(glob.instance + " .slideNext").height() / 2
50            });
51
52            jQuery(glob.instance + " .slidePrev").css({left: 0});
53            jQuery(glob.instance + " .slideNext").css({right: 0});
54        },
55        /* Bind button controls */
56        bindControls: function() {
57
58            /* Hover effect */
59            jQuery(glob.instance + " .slidePrev," + glob.instance + " .slideNext").on("mouseover", function() {
60                jQuery(this).animate({
61                    opacity: 1
62                }, {
63                    queue: false,
64                    duration: 1000,
65                    easing: "easeOutCubic"
66                });
67            });
68
69            /* Hover effect - mouseout */
70            jQuery(glob.instance + " .slidePrev," + glob.instance + " .slideNext").on("mouseout", function() {
71                jQuery(this).animate({
72                    opacity: 0.5
73                }, {
74                    queue: false,
75                    duration: 1000,
76                    easing: "easeOutCubic"
77                });
78            });
79            
80            /* Arrow Key Bind */
81            jQuery(document).on("keyup", function(e) {
82                if (e.which === 39) {
83                    jQuery(glob.instance + " .slideNext").trigger("click");
84                }
85                if (e.which === 37) {
86                    jQuery(glob.instance + " .slidePrev").trigger("click");
87                }
88            });
89
90            /* Next Button */
91            jQuery(glob.instance + " .slideNext").on("click", function() {
92                if (jQuery(glob.instance + " .slide").is(":animated")) return;
93
94                if (jQuery(glob.instance + " .slide:eq(" + (glob.cs + 1) + ")").length <= 0) {
95                    glob.cs = 0;
96
97                    jQuery(glob.instance + " .timers .timer .progress").stop();
98
99                    jQuery(glob.instance + " .timers .timer:last .progress").animate({
100                        width: "100%"
101                    }, {
102                        queue: false,
103                        duration: glob.duration,
104                        easing: "easeOutCubic",
105                        complete: function() {
106                            jQuery(glob.instance + " .timers .timer .progress").css({
107                                width: "0%"
108                            });
109                        }
110                    });
111                } else {
112                    glob.cs++;
113
114                    jQuery(glob.instance + " .timers .timer .progress").stop();
115                    jQuery(glob.instance + " .timers .timer:lt(" + glob.cs + ") .progress").animate({
116                        width: "100%"
117                    }, {
118                        queue: false,
119                        duration: glob.duration,
120                        easing: "easeOutCubic"
121                    });
122
123                }
124                content.show();
125            });
126
127            /* Previous Button */
128            jQuery(glob.instance + " .slidePrev").on("click", function() {
129                if (jQuery(glob.instance + " .slide").is(":animated"))
130                    return;
131
132                if (glob.cs <= 0) {
133                    glob.cs = jQuery(glob.instance + " .slide:last").index();
134
135                    jQuery(glob.instance + " .timers .timer .progress").stop();
136                    jQuery(glob.instance + " .timers .timer .progress").css({
137                        width: "100%"
138                    });
139                    jQuery(glob.instance + " .timers .timer:last .progress").animate({
140                        width: "0%"
141                    }, {
142                        queue: false,
143                        duration: glob.duration,
144                        easing: "easeOutCubic"
145                    });
146
147                } else {
148                    glob.cs--;
149
150                    jQuery(glob.instance + " .timers .timer .progress").stop();
151                    jQuery(glob.instance + " .timers .timer:gt(" + glob.cs + ") .progress").css({
152                        width: "0%"
153                    });
154                    jQuery(glob.instance + " .timers .timer:eq(" + glob.cs + ") .progress").animate({
155                        width: "0%"
156                    }, {
157                        queue: false,
158                        duration: glob.duration,
159                        easing: "easeOutCubic"
160                    });
161                }
162                content.show();
163            });
164            
165            jQuery(document).on("click", glob.instance + " .bullets .bullet", function(){
166                if (jQuery(glob.instance + " .slide").is(":animated")) return;
167                
168                glob.cs = jQuery(this).index();
169                
170                jQuery(glob.instance + " .timers .timer .progress").stop();
171                
172                jQuery(glob.instance + " .timers .timer:gt(" + glob.cs + ") .progress").css({
173                    width: "0%"
174                });
175                
176                jQuery(glob.instance + " .timers .timer:lt(" + glob.cs + ") .progress").css({
177                    width: "100%"
178                });
179                
180                jQuery(glob.instance + " .timers .timer:eq(" + glob.cs + ") .progress").animate({
181                    width: "0%"
182                }, {
183                    queue: false,
184                    duration: glob.duration,
185                    easing: "easeOutCubic"
186                });
187                
188                content.show();
189            });
190        }
191    };
192
193    var content = {
194        init: function() {

195            /* First run content adjustment */
196            
197            if (glob.bullets == "0") {
198                 jQuery(glob.instance + " .bullets").hide();
199            }
200            
201            if (glob.arrows == "0") {
202                 jQuery(glob.instance + " .slidePrev, " + glob.instance + " .slideNext").hide();
203            }
204            
205            jQuery(glob.instance + " .slide img").imagesLoaded(function() {
206                
207                for (var i = 0; i < jQuery(glob.instance + " .slide").length; i++) {
208                    jQuery('<div class="timer"><div class="progress"></div></div>').appendTo(glob.instance + " .timers");
209                    jQuery('<div class="bullet"><i class="fa fa-circle"></i></div>').appendTo(glob.instance + " .bullets");
210                }
211                
212                jQuery(glob.instance + " .bullets .bullet:eq(" + glob.cs + ")").addClass("active");
213                
214                jQuery(glob.instance + " .timers").css({
215                    width: (jQuery(glob.instance + " .timers .timer").length + 1) * jQuery(glob.instance + " .timers .timer").width() + 5
216                });
217
218                jQuery(glob.instance + " .slide:eq(" + glob.cs + ")").fadeIn({
219                    duration: 1500,
220                    easing: "swing"
221                });
222                
223                
224                jQuery(glob.instance).animate({
225                    height: jQuery(glob.instance + " .slide:first img").height()
226                }, {
227                    duration: 750,
228                    easing: "easeInOutExpo",
229                    complete: function() {
230                        jQuery(glob.instance + " .slidePrev").animate({
231                            left: 0
232                        }, {
233                            duration: 1500,
234                            easing: "easeInOutExpo"
235                        });
236
237                        jQuery(glob.instance + " .slideNext").animate({
238                            right: 0
239                        }, {
240                            duration: 1500,
241                            easing: "easeInOutExpo"
242                        });
243
244                        jQuery(glob.instance + " .bullets").animate({
245                            bottom: 15
246                        }, {
247                            duration: 1500,
248                            easing: "easeInOutExpo"
249                        });
250                        
251                        
252
253                        content.showText();
254                        controls.position();
255                        display.resize();
256                        auto.run();
257                        auto.focus();
258                    }
259                });
260                
261            });
262        },
263        show: function() {
264            /* Show slide */
265
266            content.hideText();
267            
268            jQuery(glob.instance + " .bullets .bullet").removeClass("active");
269            jQuery(glob.instance + " .bullets .bullet:eq(" + glob.cs + ")").addClass("active");
270            
271            jQuery(glob.instance + " .slide:eq(" + glob.cs + ")").css({
272                opacity: 0,
273                zIndex: 2
274            }).show().animate({
275                opacity: 1
276            }, {
277                queue: false,
278                duration: glob.duration,
279                easing: "swing",
280                complete: function() {
281                    jQuery(glob.instance + " .slide:lt(" + glob.cs + ")," + glob.instance + " .slide:gt(" + glob.cs + ")").css({
282                        zIndex: 0
283                    }).hide();
284
285                    jQuery(glob.instance + " .slide:eq(" + glob.cs + ")").css({
286                        zIndex: 1
287                    });
288                    content.showText();
289                    auto.run();
290                }
291            });
292        },
293        showText: function() {
294            
295            /* Position Text */
296            var textWrapper = jQuery(glob.instance + " .slide:eq(" + glob.cs + ") .slide_content_wrap");
297
298            textWrapper.css({
299                top: "50%",
300                left: 0,
301                display: "block"
302            });
303
304            textWrapper.css({
305                marginTop: -1 * textWrapper.height() / 2,
306                marginLeft: "8%"
307            });
308
309            /* Show slide text */
310            jQuery(glob.instance + " .slide:eq(" + glob.cs + ") .title").fadeTo(300, 1);
311
312            setTimeout(function() {
313                jQuery(glob.instance + " .slide:eq(" + glob.cs + ") .description").fadeTo(300, 1);
314            }, 150);
315
316            setTimeout(function() {
317                jQuery(glob.instance + " .slide:eq(" + glob.cs + ") .readmore").fadeTo(300, 1);
318            }, 300);
319        },
320        hideText: function() {
321            /* Hide slide text */
322
323            jQuery(glob.instance + " .slide .title").fadeTo(300, 0);
324
325            setTimeout(function() {
326                jQuery(glob.instance + " .slide .description").fadeTo(300, 0);
327            }, 150);
328
329            setTimeout(function() {
330                jQuery(glob.instance + " .slide .readmore").fadeTo(300, 0);
331            }, 300);
332        }
333    };
334
335    var auto = {
336        /* Run timer */
337        run: function() {
338            
339            if (glob.pause === 0) return;
340            
341            jQuery(glob.instance + " .timer:eq(" + glob.cs + ") .progress").animate({
342                width: "100%"
343            }, {
344                queue: false,
345                duration: (glob.pause - (glob.pause / 100) * (((jQuery(glob.instance + " .timer:eq(" + glob.cs + ") .progress").width() / jQuery(glob.instance + " .timer:eq(" + glob.cs + ")").width()) * 100))),
346                easing: "linear",
347                complete: function() {
348                    jQuery(glob.instance + " .slideNext").trigger("click");
349                }
350            });
351        },
352        /* Stop on focus */
353        focus: function() {
354            
355            if (glob.hoverpause === 1) {
356                jQuery(glob.instance + " .slide_content").on("mouseover", function() {
357                    if (jQuery(glob.instance + " .slide").is(":animated"))
358                        return;
359                    jQuery(glob.instance + " .timer .progress").stop();
360                });
361
362                jQuery(glob.instance + " .slide_content").on("mouseleave", function() {
363                    if (jQuery(glob.instance + " .slide").is(":animated"))
364                        return;
365                    auto.run();
366                });
367            }
368        }
369    };
370}