https://skandobs.se/js/jquery.swipebox.js

1/*---------------------------------------------------------------------------------------------
2
3@author       Constantin Saguin - @brutaldesign
4@link            http://csag.co
5@github        http://github.com/brutaldesign/swipebox
6@version     1.2.1
7@license      MIT License
8
9----------------------------------------------------------------------------------------------*/
10
11;(function (window, document, $, undefined) {
12	
13	$.swipebox = function(elem, options) {
14
15		var defaults = {
16			useCSS : true,
17			initialIndexOnArray : 0,
18			hideBarsDelay : 3000,
19			videoMaxWidth : 1140,
20			vimeoColor : 'CCCCCC',
21			beforeOpen: null,
22		      	afterClose: null
23		},
24		
25		plugin = this,
26		elements = [], // slides array [{href:'...', title:'...'}, ...],
27		elem = elem,
28		selector = elem.selector,
29		$selector = $(selector),
30		isTouch = document.createTouch !== undefined || ('ontouchstart' in window) || ('onmsgesturechange' in window) || navigator.msMaxTouchPoints,
31		supportSVG = !!(window.SVGSVGElement),
32		winWidth = window.innerWidth ? window.innerWidth : $(window).width(),
33		winHeight = window.innerHeight ? window.innerHeight : $(window).height(),
34		html = '<div id="swipebox-overlay">\
35				<div id="swipebox-slider"></div>\
36				<div id="swipebox-caption"></div>\
37				<div id="swipebox-action">\
38					<a id="swipebox-close"></a>\
39					<a id="swipebox-prev"></a>\
40					<a id="swipebox-next"></a>\
41				</div>\
42		</div>';
43
44		plugin.settings = {}
45
46		plugin.init = function(){
47
48			plugin.settings = $.extend({}, defaults, options);
49
50			if ($.isArray(elem)) {
51
52				elements = elem;
53				ui.target = $(window);
54				ui.init(plugin.settings.initialIndexOnArray);
55
56			}else{
57
58				$selector.click(function(e){
59					elements = [];
60					var index , relType, relVal;
61
62					if (!relVal) {
63						relType = 'rel';
64						relVal  = $(this).attr(relType);
65					}
66
67					if (relVal && relVal !== '' && relVal !== 'nofollow') {
68						$elem = $selector.filter('[' + relType + '="' + relVal + '"]');
69					}else{
70						$elem = $(selector);
71					}
72
73					$elem.each(function(){
74
75						var title = null, href = null;
76						
77						if( $(this).attr('title') )
78							title = $(this).attr('title');
79
80						if( $(this).attr('href') )
81							href = $(this).attr('href');
82
83						elements.push({
84							href: href,
85							title: title
86						});
87					});
88					
89					index = $elem.index($(this));
90					e.preventDefault();
91					e.stopPropagation();
92					ui.target = $(e.target);
93					ui.init(index);
94				});
95			}
96		}
97
98		plugin.refresh = function() {
99			if (!$.isArray(elem)) {
100				ui.destroy();
101				$elem = $(selector);
102				ui.actions();
103			}
104		}
105
106		var ui = {
107
108			init : function(index){
109				if (plugin.settings.beforeOpen) 
110					plugin.settings.beforeOpen();
111				this.target.trigger('swipebox-start');
112				$.swipebox.isOpen = true;
113				this.build();
114				this.openSlide(index);
115				this.openMedia(index);
116				this.preloadMedia(index+1);
117				this.preloadMedia(index-1);
118			},
119
120			build : function(){
121				var $this = this;
122
123				$('body').append(html);
124
125				if($this.doCssTrans()){
126					$('#swipebox-slider').css({
127						'-webkit-transition' : 'left 0.4s ease',
128						'-moz-transition' : 'left 0.4s ease',
129						'-o-transition' : 'left 0.4s ease',
130						'-khtml-transition' : 'left 0.4s ease',
131						'transition' : 'left 0.4s ease'
132					});
133					$('#swipebox-overlay').css({
134						'-webkit-transition' : 'opacity 1s ease',
135						'-moz-transition' : 'opacity 1s ease',
136						'-o-transition' : 'opacity 1s ease',
137						'-khtml-transition' : 'opacity 1s ease',
138						'transition' : 'opacity 1s ease'
139					});
140					$('#swipebox-action, #swipebox-caption').css({
141						'-webkit-transition' : '0.5s',
142						'-moz-transition' : '0.5s',
143						'-o-transition' : '0.5s',
144						'-khtml-transition' : '0.5s',
145						'transition' : '0.5s'
146					});
147				}
148
149
150/*				if(supportSVG){
151					var bg = $('#swipebox-action #swipebox-close').css('background-image');
152					bg = bg.replace('png', 'svg');
153					$('#swipebox-action #swipebox-prev,#swipebox-action #swipebox-next,#swipebox-action #swipebox-close').css({
154						'background-image' : bg
155					});

156				}*/
157				
158				$.each( elements,  function(){
159					$('#swipebox-slider').append('<div class="slide"></div>');
160				});
161
162				$this.setDim();
163				$this.actions();
164				$this.keyboard();
165				$this.gesture();
166				$this.animBars();
167				$this.resize();
168				
169			},
170
171			setDim : function(){
172
173				var width, height, sliderCss = {};
174				
175				if( "onorientationchange" in window ){
176
177					window.addEventListener("orientationchange", function() {
178						if( window.orientation == 0 ){
179							width = winWidth;
180							height = winHeight;
181						}else if( window.orientation == 90 || window.orientation == -90 ){
182							width = winHeight;
183							height = winWidth;
184						}
185					}, false);
186					
187				
188				}else{
189
190					width = window.innerWidth ? window.innerWidth : $(window).width();
191					height = window.innerHeight ? window.innerHeight : $(window).height();
192				}
193
194				sliderCss = {
195					width : width,
196					height : height
197				}
198
199
200				$('#swipebox-overlay').css(sliderCss);
201
202			},
203
204			resize : function (){
205				var $this = this;
206				
207				$(window).resize(function() {
208					$this.setDim();
209				}).resize();
210			},
211
212			supportTransition : function() {
213				var prefixes = 'transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition'.split(' ');
214				for(var i = 0; i < prefixes.length; i++) {
215					if(document.createElement('div').style[prefixes[i]] !== undefined) {
216						return prefixes[i];
217					}
218				}
219				return false;
220			},
221
222			doCssTrans : function(){
223				if(plugin.settings.useCSS && this.supportTransition() ){
224					return true;
225				}
226			},
227
228			gesture : function(){
229				if ( isTouch ){
230					var $this = this,
231					distance = null,
232					swipMinDistance = 10,
233					startCoords = {},
234					endCoords = {};
235					var bars = $('#swipebox-caption, #swipebox-action');
236
237					bars.addClass('visible-bars');
238					$this.setTimeout();
239
240					$('body').bind('touchstart', function(e){
241
242						$(this).addClass('touching');
243
244		  				endCoords = e.originalEvent.targetTouches[0];
245		    				startCoords.pageX = e.originalEvent.targetTouches[0].pageX;
246
247						$('.touching').bind('touchmove',function(e){
248							e.preventDefault();
249							e.stopPropagation();
250		    					endCoords = e.originalEvent.targetTouches[0];
251
252						});
253			           			
254			           			return false;
255
256	           			}).bind('touchend',function(e){
257	           				e.preventDefault();
258					e.stopPropagation();
259   				

260   					distance = endCoords.pageX - startCoords.pageX;
261	       				
262	       				if( distance >= swipMinDistance ){
263	       					
264	       					// swipeLeft
265	       					$this.getPrev();
266	       				
267	       				}else if( distance <= - swipMinDistance ){
268	       					
269	       					// swipeRight
270	       					$this.getNext();
271	       				
272	       				}else{
273	       					// tap
274	       					if(!bars.hasClass('visible-bars')){
275							$this.showBars();
276							$this.setTimeout();
277						}else{
278							$this.clearTimeout();
279							$this.hideBars();
280						}
281
282	       				}	
283
284	       				$('.touching').off('touchmove').removeClass('touching');
285						
286					});
287
288           				}
289			},
290
291			setTimeout: function(){
292				if(plugin.settings.hideBarsDelay > 0){
293					var $this = this;
294					$this.clearTimeout();
295					$this.timeout = window.setTimeout( function(){
296						$this.hideBars() },
297						plugin.settings.hideBarsDelay
298					);
299				}
300			},
301			
302			clearTimeout: function(){	
303				window.clearTimeout(this.timeout);
304				this.timeout = null;
305			},
306
307			showBars : function(){
308				var bars = $('#swipebox-caption, #swipebox-action');
309				if(this.doCssTrans()){
310					bars.addClass('visible-bars');
311				}else{
312					$('#swipebox-caption').animate({ top : 0 }, 500);
313					$('#swipebox-action').animate({ bottom : 0 }, 500);
314					setTimeout(function(){
315						bars.addClass('visible-bars');
316					}, 1000);
317				}
318			},
319
320			hideBars : function(){
321				var bars = $('#swipebox-caption, #swipebox-action');
322				if(this.doCssTrans()){
323					bars.removeClass('visible-bars');
324				}else{
325					$('#swipebox-caption').animate({ top : '-50px' }, 500);
326					$('#swipebox-action').animate({ bottom : '-50px' }, 500);
327					setTimeout(function(){
328						bars.removeClass('visible-bars');
329					}, 1000);
330				}
331			},
332
333			animBars : function(){
334				var $this = this;
335				var bars = $('#swipebox-caption, #swipebox-action');
336					
337				bars.addClass('visible-bars');
338				$this.setTimeout();
339				
340				$('#swipebox-slider').click(function(e){
341					if(!bars.hasClass('visible-bars')){
342						$this.showBars();
343						$this.setTimeout();
344					}
345				});
346
347				$('#swipebox-action').hover(function() {
348				  		$this.showBars();
349						bars.addClass('force-visible-bars');
350						$this.clearTimeout();
351					
352					},function() { 
353						bars.removeClass('force-visible-bars');
354						$this.setTimeout();
355
356				});
357			},
358
359			keyboard : function(){
360				var $this = this;
361				$(window).bind('keyup', function(e){
362					e.preventDefault();
363					e.stopPropagation();
364					if (e.keyCode == 37){
365						$this.getPrev();
366					}
367					else if (e.keyCode==39){
368						$this.getNext();
369					}
370					else if (e.keyCode == 27) {
371						$this.closeSlide();
372					}
373				});
374			},
375
376			actions : function(){
377				var $this = this;
378				
379				if( elements.length < 2 ){
380					$('#swipebox-prev, #swipebox-next').hide();
381				}else{
382					$('#swipebox-prev').bind('click touchend', function(e){
383						e.preventDefault();
384						e.stopPropagation();
385						$this.getPrev();
386						$this.setTimeout();
387					});
388					
389					$('#swipebox-next').bind('click touchend', function(e){
390						e.preventDefault();
391						e.stopPropagation();
392						$this.getNext();
393						$this.setTimeout();
394					});
395				}
396
397				$('#swipebox-close').bind('click touchend', function(e){
398					$this.closeSlide();
399				});
400			},
401			
402			setSlide : function (index, isFirst){
403				isFirst = isFirst || false;
404				
405				var slider = $('#swipebox-slider');
406				
407				if(this.doCssTrans()){
408					slider.css({ left : (-index*100)+'%' });
409				}else{
410					slider.animate({ left : (-index*100)+'%' });
411				}
412				
413				$('#swipebox-slider .slide').removeClass('current');
414				$('#swipebox-slider .slide').eq(index).addClass('current');
415				this.setTitle(index);
416
417				if( isFirst ){
418					slider.fadeIn();
419				}
420
421				$('#swipebox-prev, #swipebox-next').removeClass('disabled');
422				if(index == 0){
423					$('#swipebox-prev').addClass('disabled');
424				}else if( index == elements.length - 1 ){
425					$('#swipebox-next').addClass('disabled');
426				}
427			},
428		
429			openSlide : function (index){
430				$('html').addClass('swipebox');
431				$(window).trigger('resize'); // fix scroll bar visibility on desktop
432				this.setSlide(index, true);
433			},
434		
435			preloadMedia : function (index){
436				var $this = this, src = null;
437
438				if( elements[index] !== undefined )
439					src = elements[index].href;
440
441				if( !$this.isVideo(src) ){
442					setTimeout(function(){
443						$this.openMedia(index);
444					}, 1000);
445				}else{
446					$this.openMedia(index);
447				}
448			},
449			
450			openMedia : function (index){
451				var $this = this, src = null;
452
453				if( elements[index] !== undefined )
454					src = elements[index].href;
455
456				if(index < 0 || index >= elements.length){
457					return false;
458				}
459
460				if( !$this.isVideo(src) ){
461					$this.loadMedia(src, function(){
462						$('#swipebox-slider .slide').eq(index).html(this);
463					});

464				}else{
465					$('#swipebox-slider .slide').eq(index).html($this.getVideo(src));
466				}
467				
468			},
469
470			setTitle : function (index, isFirst){
471				var title = null;
472
473				$('#swipebox-caption').empty();
474
475				if( elements[index] !== undefined )
476					title = elements[index].title;
477				
478				if(title){
479					$('#swipebox-caption').append(title);
480				}
481			},
482
483			isVideo : function (src){
484
485				if( src ){
486					if( 
487						src.match(/youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/) 
488						|| src.match(/vimeo\.com\/([0-9]*)/) 
489					){
490						return true;
491					}
492				}
493					
494			},
495
496			getVideo : function(url){
497				var iframe = '';
498				var output = '';
499				var youtubeUrl = url.match(/watch\?v=([a-zA-Z0-9\-_]+)/);
500				var vimeoUrl = url.match(/vimeo\.com\/([0-9]*)/);
501				if( youtubeUrl ){
502
503					iframe = '<iframe width="560" height="315" src="//www.youtube.com/embed/'+youtubeUrl[1]+'" frameborder="0" allowfullscreen></iframe>';
504				
505				}else if(vimeoUrl){
506
507					iframe = '<iframe width="560" height="315"  src="http://player.vimeo.com/video/'+vimeoUrl[1]+'?byline=0&amp;portrait=0&amp;color='+plugin.settings.vimeoColor+'" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
508				
509				}
510
511				return '<div class="swipebox-video-container" style="max-width:'+plugin.settings.videomaxWidth+'px"><div class="swipebox-video">'+iframe+'</div></div>';
512			},
513			
514			loadMedia : function (src, callback){
515				if( !this.isVideo(src) ){
516					var img = $('<img>').on('load', function(){
517						callback.call(img);
518					});
519					
520					img.attr('src',src);
521				}	
522			},
523			
524			getNext : function (){
525				var $this = this;
526				index = $('#swipebox-slider .slide').index($('#swipebox-slider .slide.current'));
527				if(index+1 < elements.length){
528					index++;
529					$this.setSlide(index);
530					$this.preloadMedia(index+1);
531				}
532				else{
533					
534					$('#swipebox-slider').addClass('rightSpring');
535					setTimeout(function(){
536						$('#swipebox-slider').removeClass('rightSpring');
537					},500);
538				}
539			},
540			
541			getPrev : function (){
542				index = $('#swipebox-slider .slide').index($('#swipebox-slider .slide.current'));
543				if(index > 0){
544					index--;
545					this.setSlide(index);
546					this.preloadMedia(index-1);
547				}
548				else{
549					
550					$('#swipebox-slider').addClass('leftSpring');
551					setTimeout(function(){
552						$('#swipebox-slider').removeClass('leftSpring');
553					},500);
554				}
555			},
556
557
558			closeSlide : function (){
559				$('html').removeClass('swipebox');
560				$(window).trigger('resize');
561				this.destroy();
562			},
563
564			destroy : function(){
565				$(window).unbind('keyup');
566				$('body').unbind('touchstart');
567				$('body').unbind('touchmove');
568				$('body').unbind('touchend');
569				$('#swipebox-slider').unbind();
570				$('#swipebox-overlay').remove();
571				if (!$.isArray(elem))
572					elem.removeData('_swipebox');
573				if ( this.target )
574					this.target.trigger('swipebox-destroy');
575				$.swipebox.isOpen = false;
576				if (plugin.settings.afterClose) 
577					plugin.settings.afterClose();
578 			}
579
580		};
581
582		plugin.init();
583		
584	};
585
586	$.fn.swipebox = function(options){
587		if (!$.data(this, "_swipebox")) {
588			var swipebox = new $.swipebox(this, options);
589			this.data('_swipebox', swipebox);
590		}
591		return this.data('_swipebox');
592	}
593
594}(window, document, jQuery));