https://longsuttonbaptistchurch.org.uk/inc/js/jquery.parallax.js

1// Adapted from https://gist.github.com/paulirish/1579671 which derived from
2// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
3// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
4
5// requestAnimationFrame polyfill by Erik Möller.
6// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon
7
8// MIT license
9
10if (!Date.now)
11    Date.now = function() { return new Date().getTime(); };
12
13(function() {
14    'use strict';
15
16    var vendors = ['webkit', 'moz'];
17    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
18        var vp = vendors[i];
19        window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];
20        window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']
21                                   || window[vp+'CancelRequestAnimationFrame']);
22    }
23    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
24        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
25        var lastTime = 0;
26        window.requestAnimationFrame = function(callback) {
27            var now = Date.now();
28            var nextTime = Math.max(lastTime + 16, now);
29            return setTimeout(function() { callback(lastTime = nextTime); },
30                              nextTime - now);
31        };
32        window.cancelAnimationFrame = clearTimeout;
33    }
34}());
35
36/*
37Plugin: jQuery Parallax
38Version 1.1.3
39Author: Ian Lunn
40Twitter: @IanLunn
41Author URL: http://www.ianlunn.co.uk/
42Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/
43
44UPDATED: mobirise devs:
45  added support for requestAnimationFrame
46
47Dual licensed under the MIT and GPL licenses:
48http://www.opensource.org/licenses/mit-license.php
49http://www.gnu.org/licenses/gpl.html
50*/
51(function( $ ){
52	var $window = $(window);
53	var windowHeight = $window.height();
54
55	$window.on('resize', function () {
56		windowHeight = $window.height();
57	});
58
59    var uniqNum = 123;
60
61    // init parallax
62    var parallax = function($this, xpos, speedFactor, outerHeight) {
63        uniqNum += 68;
64        var instanceName = 'jqueryparallax' + uniqNum;
65        $this.data('jquery-parallax-instance', instanceName);
66
67        // function to be called whenever the window is scrolled or resized
68        function update(){
69            //get the starting position of each element to have parallax applied to it
70            var firstTop = $this.offset().top;
71            var pos = $window.scrollTop();
72            var top = $this.offset().top;
73            var height = outerHeight ? $this.outerHeight(true) : $this.height();
74
75            // Check if totally above or totally below viewport
76            if (top + height < pos || top > pos + windowHeight) {
77                return;
78            }
79
80            $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
81        }
82
83        $window.on('scroll.' + instanceName + ' resize.' + instanceName + ' load.' + instanceName + '', function() {
84            window.requestAnimationFrame(update);
85        });
86        update();
87    };
88
89    // destroy parallax
90    var destroy = function($this) {
91        var instance = $this.data('jquery-parallax-instance');
92        if(instance) {
93            $window.off('.' + instance);
94            $this.removeData('jquery-parallax-instance')
95            $this.css('backgroundPosition', 'center center');
96        }
97    };
98
99	$.fn.parallax = function(xpos, speedFactor, outerHeight) {
100        $(this).each(function() {
101            if(xpos == 'destroy') {
102                destroy($(this));
103            } else {
104                parallax(
105                    $(this),
106                    typeof xpos !== 'undefined' ? xpos : '50%',
107                    typeof speedFactor !== 'undefined' ? speedFactor : 0.1,
108                    typeof outerHeight !== 'undefined' ? outerHeight : true
109                );
110            }
111        })
112	};
113})(jQuery);
114
115
116// Kopage Video Lightbox
117
118
119
120(function($) {
121    $.fn.kopageVideoLightbox = function(o) {
122
123        o = $.extend({
124
125			autoplay:true,
126			button:true // show "play" button above object
127
128        }, o);
129
130		// prepare lightbox layout
131		var lt='<div id="kopageVideoModal" class="kelement" style=";"><div>';
132
133		lt+='<a id="kopageVideoModalClose" href="javascript:void(null)">&times;</a>';
134		lt+='<iframe id="kopageVideoModalFrame" width="870" height="489" frameborder="0" allowfullscreen></iframe>';
135		lt+='</div></div>';
136
137		// add some style
138		lt+='<style>#kopageVideoModal{box-sizing:border-box;position:fixed;z-index:65600;left:0;top:0;bottom:0;height:100vh;width:100vw;display: flex; align-items: center; justify-content: center;	    background-color: rgba(0,0,0,0);	    background-image: radial-gradient(circle at center,rgba(127,127,127,0.5) 0%,rgba(0,0,0,0.7) 100%);transition: opacity 0.2s linear;opacity:0;pointer-events: none;}';
139		lt+='#kopageVideoModal.modalActive{opacity:1;pointer-events: auto}';
140		lt+='#kopageVideoModalFrame{border:5px solid #fff;box-shadow:2px 2px 66px rgba(0,0,0,0.5);background:black;max-width:85vw;;max-height: 100%;}';
141		lt+='#kopageVideoModal div{position:relative; }';
142		lt+='#kopageVideoModalClose{position:absolute;top:0;right:-50px;width:50px;height:50px;background:rgba(255,255,255,1);text-align:center;line-height:45px;font-size:30px;text-decoration:none;color:#666;}';
143		lt+='#kopageVideoModalClose:hover{background:rgba(255,255,255,1);color:#111;}';
144
145
146        lt+='.kopageVideoPlay { font-size: 45px; width: 106px; height: 106px;position: absolute;top: 50%;left: 50%;z-index: 2;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.5);border: 3px solid #000;border-radius: 50%;outline: none;cursor: pointer;box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.25),0 0 70px rgba(0,0,0,0.7);transition: transform .5s ease;}';
147
148        lt+='.videoLightbox:hover .kopageVideoPlay {background-color: rgba(0, 0, 0, 1);transform: translate(-50%, -50%) scale(1.2, 1.2) ;transition: transform .3s ease,opacity .3s ease;opacity:1;}';
149
150		lt+='</style>';
151
152
153		$("body").append(lt);
154
155		$("#kopageVideoModalClose,#kopageVideoModal").click(function(){$('#kopageVideoModal').removeClass('modalActive');
156						$('#kopageVideoModalFrame').attr('src',null);})
157
158
159        return this.each(function(i, that) {
160
161			var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
162    		var match = $(that).attr('href').match(regExp);
163
164		    if (match && match[2].length == 11) {
165		        var embedUrl='https://www.youtube.com/embed/'+match[2];
166		    } else {
167		        return 'error';
168		    }
169
170
171
172			$(that).click(function(e){
173
174				e.preventDefault();
175
176				embedUrl+='?showinfo=0&amp;rel=0&amp;autohide=1&amp;disablekb=1&amp;modestbranding=1';
177
178				if(o.autoplay == true)
179					embedUrl+='&amp;autoplay=1';
180
181				$('#kopageVideoModalFrame').attr('src',embedUrl);
182				setTimeout(function(){$('#kopageVideoModal').addClass('modalActive');},200)
183
184				//alert($(that).attr('href'));
185
186			}).css({'outline':'none','overflow':'auto','position':'relative','text-align':'center','display':'inline-block'/*,'align-items':'center','justify-content':'center'*/,//'border':'1px solid blue'
187        });
188
189
190			if(o.button == true)
191
192			$(that).append('<span class="kopageVideoPlay kelement" style=""><svg height=\"100px\" version=\"1.1\" viewBox=\"0 0 20 20\" width=\"100px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"><title\/><desc\/><defs\/><g fill=\"none\" stroke=\"none\"><g fill=\"#ffffff\" transform=\"translate(-168.000000, -85.000000)\"><g transform=\"translate(168.000000, 85.000000)\"><path d=\"M8,14.5 L14,10 L8,5.5 L8,14.5 L8,14.5 Z M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z\" \/><\/g><\/g><\/g><\/svg></span>');
193
194        });
195    };
196})(jQuery);