droneSite/meinswiper.js at master · sselfridge/droneSite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
"use strict";

$(document).ready(function () {
  //initialize swiper when document ready
  //TODO: use a loop to initilize swipers - brute forcing it for now.
  //See jquery solutionss here: https://github.com/nolimits4web/Swiper/issues/273
  var mySwiper = new Swiper ('.stdswipe', {
    // Optional parameters
    loop: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    pagination: '.swiper-pagination',
    onSlideChangeStart: slideChange,
    // scrollbarHide: false,
    paginationClickable: true,
    keyboardControl: true
    // scrollbar: '.swiper-scrollbar'
  })

  //loops fadeSwiper that autostarts
  var fadeSwiper = new Swiper ('.fadeswipe', {
    // Optional parameters
    loop: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    pagination: '.swiper-pagination',
    onSlideChangeStart: slideChange,
    // scrollbarHide: false,
    paginationClickable: true,
    effect: 'fade',
    keyboardControl: true,
    autoplay: 1000
    // scrollbar: '.swiper-scrollbar'
  })

  //2nd autoplay fadeSwiper on page
  var fadeSwiper2 = new Swiper ('.fadeswipe2', {
    // Optional parameters
    loop: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    pagination: '.swiper-pagination',
    onSlideChangeStart: slideChange,
    // scrollbarHide: false,
    paginationClickable: true,
    effect: 'fade',
    keyboardControl: false,
    // scrollbar: '.swiper-scrollbar'
    autoplay: 1000
  })

  //only show .5 slides on the pano for XS (mobile) screens.
  var slidesPerPano = ($(window).width() < 768) ? .5 : 1.5;
  console.log("Slides per pano (based on window size):" + slidesPerPano);

  var panoswipe = new Swiper ('.panoswipe', {
    // Optional parameters
    loop: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    pagination: '.swiper-pagination',
    paginationClickable: true,
    spaceBetween: 0,
    freeMode:true,
    slidesPerView: slidesPerPano,
    keyboardControl: false,
    grabCursor: true
  });
});


var usingiOS = false;
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  usingiOS = true;
}

function slideChange(swiper){
  if(usingiOS) return; //iOS shouldn't autoplay video.
  var index = swiper.activeIndex;
  var vid = swiper.slides[index].querySelector("#video");
  if(vid){
    // console.log("We're on video!");
    vid.play();
  }else{
    //EmptyElse for now....
  }
}

// Android fix
// Using touchstart will play the video as soon as the screen is touched.
// get the video
if(!usingiOS){
  var video = document.querySelector('#video');
  // use the whole window and a *named function*
  window.addEventListener('touchstart', function videoStart() {
    video.play();
    // console.log('first touch');
    // remove from the window and call the function we are removing
    this.removeEventListener('touchstart', videoStart);
  });
}


//iphone fix
// youtube code:
// <div class="videoWrapper"><iframe src="https://www.youtube.com/embed/2kbdn804h7s" frameborder="0" allowfullscreen></iframe></div>