WP VR – 360 Panorama and virtual tour creator for WordPress - Version 3.2.0

Version Description

  • Custom scene gallery conflict and bug fix for iphone and ipad.

=

Download this release

Release Info

Developer rextheme
Plugin Icon 128x128 WP VR – 360 Panorama and virtual tour creator for WordPress
Version 3.2.0
Comparing to
See all releases

Code changes from version 3.1.0 to 3.2.0

Files changed (8) hide show
  1. README.txt +19 -6
  2. admin/css/owl.carousel.css +40 -40
  3. admin/js/wpvr-admin.js +17 -5
  4. admin/partials/wpvr-meta-box-builder-display.php +16 -4
  5. public/class-wpvr-public.php +24 -3
  6. public/css/owl.carousel.css +40 -40
  7. public/css/wpvr-public.css +53 -0
  8. wpvr.php +33 -15
README.txt CHANGED
@@ -4,7 +4,7 @@ Donate link: https://rextheme.com/wp-vr-360-panorama-and-virtual-tour-creator-fo
4
  Tags: virtual tour, real estate tour, panorama, panorama viewer, virtual tour, 360 panorama, interactive tour
5
  Requires at least: 4.0
6
  Tested up to: 5.2
7
- Stable tag: 3.1.0
8
  Requires PHP: 5.6
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -158,11 +158,21 @@ You will find the gyroscope icon at the top left side.
158
 
159
 
160
  == Screenshots ==
161
- 1. Front-end view.
162
- 2. Scene setup window.
163
- 3. Hotspot setup window.
164
- 4. Preview window.
165
- 5. General settings window
 
 
 
 
 
 
 
 
 
 
166
 
167
  == Changelog ==
168
 
@@ -240,5 +250,8 @@ You will find the gyroscope icon at the top left side.
240
  * Border radius tag added.
241
  * Modified preview window.
242
 
 
 
 
243
  == Upgrade Notice ==
244
  Please do update the WP VR to the latest version. Each update makes it sure your plugin is supporting all tour features.  
4
  Tags: virtual tour, real estate tour, panorama, panorama viewer, virtual tour, 360 panorama, interactive tour
5
  Requires at least: 4.0
6
  Tested up to: 5.2
7
+ Stable tag: 3.2.0
8
  Requires PHP: 5.6
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
158
 
159
 
160
  == Screenshots ==
161
+ 1. Demo view
162
+ 2. Demo view
163
+ 3. Demo view
164
+ 4. Demo view
165
+ 5. Demo view
166
+ 6. Demo view
167
+ 7. Demo view
168
+ 8. Demo view
169
+ 9. Demo view
170
+ 10. Demo view
171
+ 11. Demo view
172
+ 12. Demo view
173
+ 13. Demo view
174
+ 14. Demo view
175
+ 15. Demo view
176
 
177
  == Changelog ==
178
 
250
  * Border radius tag added.
251
  * Modified preview window.
252
 
253
+ = 3.2.0 =
254
+ * Custom scene gallery conflict and bug fix for iphone and ipad.
255
+
256
  == Upgrade Notice ==
257
  Please do update the WP VR to the latest version. Each update makes it sure your plugin is supporting all tour features.  
admin/css/owl.carousel.css CHANGED
@@ -6,111 +6,111 @@
6
  /*
7
  * Owl Carousel - Core
8
  */
9
- .owl-carousel {
10
  display: none;
11
  width: 100%;
12
  -webkit-tap-highlight-color: transparent;
13
  /* position relative and z-index fix webkit rendering fonts issue */
14
  position: relative;
15
  z-index: 1; }
16
- .owl-carousel .owl-stage {
17
  position: relative;
18
  -ms-touch-action: pan-Y;
19
  touch-action: manipulation;
20
  -moz-backface-visibility: hidden;
21
  /* fix firefox animation glitch */ }
22
- .owl-carousel .owl-stage:after {
23
  content: ".";
24
  display: block;
25
  clear: both;
26
  visibility: hidden;
27
  line-height: 0;
28
  height: 0; }
29
- .owl-carousel .owl-stage-outer {
30
  position: relative;
31
  overflow: hidden;
32
  /* fix for flashing background */
33
  -webkit-transform: translate3d(0px, 0px, 0px); }
34
- .owl-carousel .owl-wrapper,
35
- .owl-carousel .owl-item {
36
  -webkit-backface-visibility: hidden;
37
  -moz-backface-visibility: hidden;
38
  -ms-backface-visibility: hidden;
39
  -webkit-transform: translate3d(0, 0, 0);
40
  -moz-transform: translate3d(0, 0, 0);
41
  -ms-transform: translate3d(0, 0, 0); }
42
- .owl-carousel .owl-item {
43
  position: relative;
44
  min-height: 1px;
45
  float: left;
46
  -webkit-backface-visibility: hidden;
47
  -webkit-tap-highlight-color: transparent;
48
  -webkit-touch-callout: none; }
49
- .owl-carousel .owl-item img {
50
  display: block;
51
  width: 100%; }
52
- .owl-carousel .owl-nav.disabled,
53
- .owl-carousel .owl-dots.disabled {
54
  display: none; }
55
- .owl-carousel .owl-nav .owl-prev,
56
- .owl-carousel .owl-nav .owl-next,
57
- .owl-carousel .owl-dot {
58
  cursor: pointer;
59
  -webkit-user-select: none;
60
  -khtml-user-select: none;
61
  -moz-user-select: none;
62
  -ms-user-select: none;
63
  user-select: none; }
64
- .owl-carousel .owl-nav button.owl-prev,
65
- .owl-carousel .owl-nav button.owl-next,
66
- .owl-carousel button.owl-dot {
67
  background: none;
68
  color: inherit;
69
  border: none;
70
  padding: 0 !important;
71
  font: inherit; }
72
- .owl-carousel.owl-loaded {
73
  display: block; }
74
- .owl-carousel.owl-loading {
75
  opacity: 0;
76
  display: block; }
77
- .owl-carousel.owl-hidden {
78
  opacity: 0; }
79
- .owl-carousel.owl-refresh .owl-item {
80
  visibility: hidden; }
81
- .owl-carousel.owl-drag .owl-item {
82
  -ms-touch-action: pan-y;
83
  touch-action: pan-y;
84
  -webkit-user-select: none;
85
  -moz-user-select: none;
86
  -ms-user-select: none;
87
  user-select: none; }
88
- .owl-carousel.owl-grab {
89
  cursor: move;
90
  cursor: grab; }
91
- .owl-carousel.owl-rtl {
92
  direction: rtl; }
93
- .owl-carousel.owl-rtl .owl-item {
94
  float: right; }
95
 
96
  /* No Js */
97
- .no-js .owl-carousel {
98
  display: block; }
99
 
100
  /*
101
  * Owl Carousel - Animate Plugin
102
  */
103
- .owl-carousel .animated {
104
  animation-duration: 1000ms;
105
  animation-fill-mode: both; }
106
 
107
- .owl-carousel .owl-animated-in {
108
  z-index: 0; }
109
 
110
- .owl-carousel .owl-animated-out {
111
  z-index: 1; }
112
 
113
- .owl-carousel .fadeOut {
114
  animation-name: fadeOut; }
115
 
116
  @keyframes fadeOut {
@@ -128,28 +128,28 @@
128
  /*
129
  * Owl Carousel - Lazy Load Plugin
130
  */
131
- .owl-carousel .owl-item {
132
  /**
133
  This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
134
  calculation of the height of the owl-item that breaks page layouts
135
  */ }
136
- .owl-carousel .owl-item .owl-lazy {
137
  opacity: 0;
138
  transition: opacity 400ms ease; }
139
- .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
140
  max-height: 0; }
141
- .owl-carousel .owl-item img.owl-lazy {
142
  transform-style: preserve-3d; }
143
 
144
  /*
145
  * Owl Carousel - Video Plugin
146
  */
147
- .owl-carousel .owl-video-wrapper {
148
  position: relative;
149
  height: 100%;
150
  background: #000; }
151
 
152
- .owl-carousel .owl-video-play-icon {
153
  position: absolute;
154
  height: 80px;
155
  width: 80px;
@@ -163,15 +163,15 @@
163
  -webkit-backface-visibility: hidden;
164
  transition: transform 100ms ease; }
165
 
166
- .owl-carousel .owl-video-play-icon:hover {
167
  -ms-transform: scale(1.3, 1.3);
168
  transform: scale(1.3, 1.3); }
169
 
170
- .owl-carousel .owl-video-playing .owl-video-tn,
171
- .owl-carousel .owl-video-playing .owl-video-play-icon {
172
  display: none; }
173
 
174
- .owl-carousel .owl-video-tn {
175
  opacity: 0;
176
  height: 100%;
177
  background-position: center center;
@@ -179,7 +179,7 @@
179
  background-size: contain;
180
  transition: opacity 400ms ease; }
181
 
182
- .owl-carousel .owl-video-frame {
183
  position: relative;
184
  z-index: 1;
185
  height: 100%;
6
  /*
7
  * Owl Carousel - Core
8
  */
9
+ .vrowl-carousel {
10
  display: none;
11
  width: 100%;
12
  -webkit-tap-highlight-color: transparent;
13
  /* position relative and z-index fix webkit rendering fonts issue */
14
  position: relative;
15
  z-index: 1; }
16
+ .vrowl-carousel .owl-stage {
17
  position: relative;
18
  -ms-touch-action: pan-Y;
19
  touch-action: manipulation;
20
  -moz-backface-visibility: hidden;
21
  /* fix firefox animation glitch */ }
22
+ .vrowl-carousel .owl-stage:after {
23
  content: ".";
24
  display: block;
25
  clear: both;
26
  visibility: hidden;
27
  line-height: 0;
28
  height: 0; }
29
+ .vrowl-carousel .owl-stage-outer {
30
  position: relative;
31
  overflow: hidden;
32
  /* fix for flashing background */
33
  -webkit-transform: translate3d(0px, 0px, 0px); }
34
+ .vrowl-carousel .owl-wrapper,
35
+ .vrowl-carousel .owl-item {
36
  -webkit-backface-visibility: hidden;
37
  -moz-backface-visibility: hidden;
38
  -ms-backface-visibility: hidden;
39
  -webkit-transform: translate3d(0, 0, 0);
40
  -moz-transform: translate3d(0, 0, 0);
41
  -ms-transform: translate3d(0, 0, 0); }
42
+ .vrowl-carousel .owl-item {
43
  position: relative;
44
  min-height: 1px;
45
  float: left;
46
  -webkit-backface-visibility: hidden;
47
  -webkit-tap-highlight-color: transparent;
48
  -webkit-touch-callout: none; }
49
+ .vrowl-carousel .owl-item img {
50
  display: block;
51
  width: 100%; }
52
+ .vrowl-carousel .owl-nav.disabled,
53
+ .vrowl-carousel .owl-dots.disabled {
54
  display: none; }
55
+ .vrowl-carousel .owl-nav .owl-prev,
56
+ .vrowl-carousel .owl-nav .owl-next,
57
+ .vrowl-carousel .owl-dot {
58
  cursor: pointer;
59
  -webkit-user-select: none;
60
  -khtml-user-select: none;
61
  -moz-user-select: none;
62
  -ms-user-select: none;
63
  user-select: none; }
64
+ .vrowl-carousel .owl-nav button.owl-prev,
65
+ .vrowl-carousel .owl-nav button.owl-next,
66
+ .vrowl-carousel button.owl-dot {
67
  background: none;
68
  color: inherit;
69
  border: none;
70
  padding: 0 !important;
71
  font: inherit; }
72
+ .vrowl-carousel.owl-loaded {
73
  display: block; }
74
+ .vrowl-carousel.owl-loading {
75
  opacity: 0;
76
  display: block; }
77
+ .vrowl-carousel.owl-hidden {
78
  opacity: 0; }
79
+ .vrowl-carousel.owl-refresh .owl-item {
80
  visibility: hidden; }
81
+ .vrowl-carousel.owl-drag .owl-item {
82
  -ms-touch-action: pan-y;
83
  touch-action: pan-y;
84
  -webkit-user-select: none;
85
  -moz-user-select: none;
86
  -ms-user-select: none;
87
  user-select: none; }
88
+ .vrowl-carousel.owl-grab {
89
  cursor: move;
90
  cursor: grab; }
91
+ .vrowl-carousel.owl-rtl {
92
  direction: rtl; }
93
+ .vrowl-carousel.owl-rtl .owl-item {
94
  float: right; }
95
 
96
  /* No Js */
97
+ .no-js .vrowl-carousel {
98
  display: block; }
99
 
100
  /*
101
  * Owl Carousel - Animate Plugin
102
  */
103
+ .vrowl-carousel .animated {
104
  animation-duration: 1000ms;
105
  animation-fill-mode: both; }
106
 
107
+ .vrowl-carousel .owl-animated-in {
108
  z-index: 0; }
109
 
110
+ .vrowl-carousel .owl-animated-out {
111
  z-index: 1; }
112
 
113
+ .vrowl-carousel .fadeOut {
114
  animation-name: fadeOut; }
115
 
116
  @keyframes fadeOut {
128
  /*
129
  * Owl Carousel - Lazy Load Plugin
130
  */
131
+ .vrowl-carousel .owl-item {
132
  /**
133
  This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
134
  calculation of the height of the owl-item that breaks page layouts
135
  */ }
136
+ .vrowl-carousel .owl-item .owl-lazy {
137
  opacity: 0;
138
  transition: opacity 400ms ease; }
139
+ .vrowl-carousel .owl-item .owl-lazy[src^=""], .vrowl-carousel .owl-item .owl-lazy:not([src]) {
140
  max-height: 0; }
141
+ .vrowl-carousel .owl-item img.owl-lazy {
142
  transform-style: preserve-3d; }
143
 
144
  /*
145
  * Owl Carousel - Video Plugin
146
  */
147
+ .vrowl-carousel .owl-video-wrapper {
148
  position: relative;
149
  height: 100%;
150
  background: #000; }
151
 
152
+ .vrowl-carousel .owl-video-play-icon {
153
  position: absolute;
154
  height: 80px;
155
  width: 80px;
163
  -webkit-backface-visibility: hidden;
164
  transition: transform 100ms ease; }
165
 
166
+ .vrowl-carousel .owl-video-play-icon:hover {
167
  -ms-transform: scale(1.3, 1.3);
168
  transform: scale(1.3, 1.3); }
169
 
170
+ .vrowl-carousel .owl-video-playing .owl-video-tn,
171
+ .vrowl-carousel .owl-video-playing .owl-video-play-icon {
172
  display: none; }
173
 
174
+ .vrowl-carousel .owl-video-tn {
175
  opacity: 0;
176
  height: 100%;
177
  background-position: center center;
179
  background-size: contain;
180
  transition: opacity 400ms ease; }
181
 
182
+ .vrowl-carousel .owl-video-frame {
183
  position: relative;
184
  z-index: 1;
185
  height: 100%;
admin/js/wpvr-admin.js CHANGED
@@ -32,7 +32,7 @@
32
  */
33
 
34
  $(document).ready(function(){
35
- $(".owl-carousel").owlCarousel({
36
  margin:10,
37
  autoWidth:true,
38
  });
@@ -101,19 +101,31 @@
101
  if (scenes) {
102
  $('.scene-gallery').trigger('destroy.owl.carousel');
103
  $('.scene-gallery').empty();
104
- $(".owl-carousel").owlCarousel({
105
  margin:10,
106
  autoWidth:true,
107
  });
108
  $.each(scenes.scenes, function (key, val) {
109
- $('.owl-stage').append('<div class="owl-item" style="width: auto; margin-right: 10px;" ><ul style="width:150px;" ><li>'+key+'</li><li><img class="scctrl" id="'+key+'_gallery" src="'+val.panorama+'"></li></ul></div>');
110
  });
111
  }
112
  var panoshow = pannellum.viewer(response.data[0]["panoid"], scenes);
 
113
  if (scenes) {
114
  $.each(scenes.scenes, function (key, val) {
115
- document.getElementById(''+key+'_gallery').addEventListener('dblclick', function(e) {
116
- panoshow.loadScene(key);
 
 
 
 
 
 
 
 
 
 
 
117
  });
118
  });
119
  }
32
  */
33
 
34
  $(document).ready(function(){
35
+ $(".vrowl-carousel").owlCarousel({
36
  margin:10,
37
  autoWidth:true,
38
  });
101
  if (scenes) {
102
  $('.scene-gallery').trigger('destroy.owl.carousel');
103
  $('.scene-gallery').empty();
104
+ $(".vrowl-carousel").owlCarousel({
105
  margin:10,
106
  autoWidth:true,
107
  });
108
  $.each(scenes.scenes, function (key, val) {
109
+ $('.owl-stage').append('<div class="owl-item" style="width: auto; margin-right: 10px;" ><ul style="width:150px;" ><li>'+key+'</li><li title="Double click to view scene"><img class="scctrl" id="'+key+'_gallery" src="'+val.panorama+'"></li></ul></div>');
110
  });
111
  }
112
  var panoshow = pannellum.viewer(response.data[0]["panoid"], scenes);
113
+ var touchtime = 0;
114
  if (scenes) {
115
  $.each(scenes.scenes, function (key, val) {
116
+ document.getElementById(''+key+'_gallery').addEventListener('click', function(e) {
117
+ if (touchtime == 0) {
118
+ touchtime = new Date().getTime();
119
+ }
120
+ else {
121
+ if (((new Date().getTime()) - touchtime) < 800) {
122
+ panoshow.loadScene(key);
123
+ touchtime = 0;
124
+ }
125
+ else {
126
+ touchtime = new Date().getTime();
127
+ }
128
+ }
129
  });
130
  });
131
  }
admin/partials/wpvr-meta-box-builder-display.php CHANGED
@@ -343,7 +343,7 @@ if (isset($postdata['panodata'])) {
343
  </li>
344
  </ul>
345
 
346
- <div class="scene-gallery owl-carousel">
347
 
348
  </div>
349
  </div>
@@ -369,16 +369,28 @@ if (isset($postdata['panodata'])) {
369
  if (scenes) {
370
  $('.scene-gallery').empty();
371
  $.each(scenes.scenes, function (key, val) {
372
- $('.scene-gallery').append('<ul style="width:150px;"><li>'+key+'</li><li><img class="scctrl" id="'+key+'_gallery" src="'+val.panorama+'"></li></ul>');
373
  });
374
  }
375
 
376
  if (response[1]['scenes'] != "") {
377
  var panoshow = pannellum.viewer(response[0]["panoid"], scenes);
 
378
  if (scenes) {
379
  $.each(scenes.scenes, function (key, val) {
380
- document.getElementById(''+key+'_gallery').addEventListener('dblclick', function(e) {
381
- panoshow.loadScene(key);
 
 
 
 
 
 
 
 
 
 
 
382
  });
383
  });
384
  }
343
  </li>
344
  </ul>
345
 
346
+ <div class="scene-gallery vrowl-carousel">
347
 
348
  </div>
349
  </div>
369
  if (scenes) {
370
  $('.scene-gallery').empty();
371
  $.each(scenes.scenes, function (key, val) {
372
+ $('.scene-gallery').append('<ul style="width:150px;"><li>'+key+'</li><li title="Double click to view scene"><img class="scctrl" id="'+key+'_gallery" src="'+val.panorama+'"></li></ul>');
373
  });
374
  }
375
 
376
  if (response[1]['scenes'] != "") {
377
  var panoshow = pannellum.viewer(response[0]["panoid"], scenes);
378
+ var touchtime = 0;
379
  if (scenes) {
380
  $.each(scenes.scenes, function (key, val) {
381
+ document.getElementById(''+key+'_gallery').addEventListener('click', function(e) {
382
+ if (touchtime == 0) {
383
+ touchtime = new Date().getTime();
384
+ }
385
+ else {
386
+ if (((new Date().getTime()) - touchtime) < 800) {
387
+ panoshow.loadScene(key);
388
+ touchtime = 0;
389
+ }
390
+ else {
391
+ touchtime = new Date().getTime();
392
+ }
393
+ }
394
  });
395
  });
396
  }
public/class-wpvr-public.php CHANGED
@@ -565,15 +565,22 @@ class Wpvr_Public {
565
 
566
  if ($vrgallery) {
567
  //===Carousal setup===//
568
- $html .= '<div id="sccontrols" class="scene-gallery owl-carousel owl-theme">';
 
 
 
 
 
 
569
  if (isset($panodata["scene-list"])) {
570
  foreach ($panodata["scene-list"] as $panoscenes) {
571
  $scene_key = $panoscenes['scene-id'];
572
  $img_src_url = $panoscenes['scene-attachment-url'];
573
- $html .= '<ul style="width:150px;"><li><img class="scctrl" id="'.$scene_key.'_gallery_'.$id.'" src="'.$img_src_url.'"></li></ul>';
574
  }
575
  }
576
  $html .= '</div>';
 
577
  //===Carousal setup end===//
578
  }
579
 
@@ -602,13 +609,27 @@ class Wpvr_Public {
602
  $html .= '}';
603
 
604
  $html .= 'var panoshow'.$id.' = pannellum.viewer(response[0]["panoid"], scenes);';
 
605
  if ($vrgallery) {
606
  if (isset($panodata["scene-list"])) {
607
  foreach ($panodata["scene-list"] as $panoscenes) {
608
  $scene_key = $panoscenes['scene-id'];
609
  $scene_key_gallery = $panoscenes['scene-id'].'_gallery_'.$id;
610
  $img_src_url = $panoscenes['scene-attachment-url'];
611
- $html .= 'document.getElementById("'.$scene_key_gallery.'").addEventListener("dblclick", function(e) { panoshow'.$id.'.loadScene("'.$scene_key.'"); });';
 
 
 
 
 
 
 
 
 
 
 
 
 
612
  }
613
  }
614
  }
565
 
566
  if ($vrgallery) {
567
  //===Carousal setup===//
568
+ $html .= '<div id="vrgcontrols">';
569
+
570
+ $html .= '<div class="vrgctrl vrbounce">';
571
+ $html .= '</div>';
572
+ $html .= '</div>';
573
+
574
+ $html .= '<div id="sccontrols" class="scene-gallery vrowl-carousel owl-theme">';
575
  if (isset($panodata["scene-list"])) {
576
  foreach ($panodata["scene-list"] as $panoscenes) {
577
  $scene_key = $panoscenes['scene-id'];
578
  $img_src_url = $panoscenes['scene-attachment-url'];
579
+ $html .= '<ul style="width:150px;"><li title="Double click to view scene"><img class="scctrl" id="'.$scene_key.'_gallery_'.$id.'" src="'.$img_src_url.'"></li></ul>';
580
  }
581
  }
582
  $html .= '</div>';
583
+
584
  //===Carousal setup end===//
585
  }
586
 
609
  $html .= '}';
610
 
611
  $html .= 'var panoshow'.$id.' = pannellum.viewer(response[0]["panoid"], scenes);';
612
+ $html .= 'var touchtime = 0;';
613
  if ($vrgallery) {
614
  if (isset($panodata["scene-list"])) {
615
  foreach ($panodata["scene-list"] as $panoscenes) {
616
  $scene_key = $panoscenes['scene-id'];
617
  $scene_key_gallery = $panoscenes['scene-id'].'_gallery_'.$id;
618
  $img_src_url = $panoscenes['scene-attachment-url'];
619
+ $html .= 'document.getElementById("'.$scene_key_gallery.'").addEventListener("click", function(e) { ';
620
+ $html .= 'if (touchtime == 0) {';
621
+ $html .= 'touchtime = new Date().getTime();';
622
+ $html .= '} else {';
623
+ $html .= 'if (((new Date().getTime()) - touchtime) < 800) {';
624
+ $html .= 'panoshow'.$id.'.loadScene("'.$scene_key.'");';
625
+ $html .= 'touchtime = 0;';
626
+ $html .= '} else {';
627
+ $html .= 'touchtime = new Date().getTime();';
628
+ $html .= '}';
629
+
630
+ $html .= '}';
631
+
632
+ $html .= '});';
633
  }
634
  }
635
  }
public/css/owl.carousel.css CHANGED
@@ -6,111 +6,111 @@
6
  /*
7
  * Owl Carousel - Core
8
  */
9
- .owl-carousel {
10
  display: none;
11
  width: 100%;
12
  -webkit-tap-highlight-color: transparent;
13
  /* position relative and z-index fix webkit rendering fonts issue */
14
  position: relative;
15
  z-index: 1; }
16
- .owl-carousel .owl-stage {
17
  position: relative;
18
  -ms-touch-action: pan-Y;
19
  touch-action: manipulation;
20
  -moz-backface-visibility: hidden;
21
  /* fix firefox animation glitch */ }
22
- .owl-carousel .owl-stage:after {
23
  content: ".";
24
  display: block;
25
  clear: both;
26
  visibility: hidden;
27
  line-height: 0;
28
  height: 0; }
29
- .owl-carousel .owl-stage-outer {
30
  position: relative;
31
  overflow: hidden;
32
  /* fix for flashing background */
33
  -webkit-transform: translate3d(0px, 0px, 0px); }
34
- .owl-carousel .owl-wrapper,
35
- .owl-carousel .owl-item {
36
  -webkit-backface-visibility: hidden;
37
  -moz-backface-visibility: hidden;
38
  -ms-backface-visibility: hidden;
39
  -webkit-transform: translate3d(0, 0, 0);
40
  -moz-transform: translate3d(0, 0, 0);
41
  -ms-transform: translate3d(0, 0, 0); }
42
- .owl-carousel .owl-item {
43
  position: relative;
44
  min-height: 1px;
45
  float: left;
46
  -webkit-backface-visibility: hidden;
47
  -webkit-tap-highlight-color: transparent;
48
  -webkit-touch-callout: none; }
49
- .owl-carousel .owl-item img {
50
  display: block;
51
  width: 100%; }
52
- .owl-carousel .owl-nav.disabled,
53
- .owl-carousel .owl-dots.disabled {
54
  display: none; }
55
- .owl-carousel .owl-nav .owl-prev,
56
- .owl-carousel .owl-nav .owl-next,
57
- .owl-carousel .owl-dot {
58
  cursor: pointer;
59
  -webkit-user-select: none;
60
  -khtml-user-select: none;
61
  -moz-user-select: none;
62
  -ms-user-select: none;
63
  user-select: none; }
64
- .owl-carousel .owl-nav button.owl-prev,
65
- .owl-carousel .owl-nav button.owl-next,
66
- .owl-carousel button.owl-dot {
67
  background: none;
68
  color: inherit;
69
  border: none;
70
  padding: 0 !important;
71
  font: inherit; }
72
- .owl-carousel.owl-loaded {
73
  display: block; }
74
- .owl-carousel.owl-loading {
75
  opacity: 0;
76
  display: block; }
77
- .owl-carousel.owl-hidden {
78
  opacity: 0; }
79
- .owl-carousel.owl-refresh .owl-item {
80
  visibility: hidden; }
81
- .owl-carousel.owl-drag .owl-item {
82
  -ms-touch-action: pan-y;
83
  touch-action: pan-y;
84
  -webkit-user-select: none;
85
  -moz-user-select: none;
86
  -ms-user-select: none;
87
  user-select: none; }
88
- .owl-carousel.owl-grab {
89
  cursor: move;
90
  cursor: grab; }
91
- .owl-carousel.owl-rtl {
92
  direction: rtl; }
93
- .owl-carousel.owl-rtl .owl-item {
94
  float: right; }
95
 
96
  /* No Js */
97
- .no-js .owl-carousel {
98
  display: block; }
99
 
100
  /*
101
  * Owl Carousel - Animate Plugin
102
  */
103
- .owl-carousel .animated {
104
  animation-duration: 1000ms;
105
  animation-fill-mode: both; }
106
 
107
- .owl-carousel .owl-animated-in {
108
  z-index: 0; }
109
 
110
- .owl-carousel .owl-animated-out {
111
  z-index: 1; }
112
 
113
- .owl-carousel .fadeOut {
114
  animation-name: fadeOut; }
115
 
116
  @keyframes fadeOut {
@@ -128,28 +128,28 @@
128
  /*
129
  * Owl Carousel - Lazy Load Plugin
130
  */
131
- .owl-carousel .owl-item {
132
  /**
133
  This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
134
  calculation of the height of the owl-item that breaks page layouts
135
  */ }
136
- .owl-carousel .owl-item .owl-lazy {
137
  opacity: 0;
138
  transition: opacity 400ms ease; }
139
- .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
140
  max-height: 0; }
141
- .owl-carousel .owl-item img.owl-lazy {
142
  transform-style: preserve-3d; }
143
 
144
  /*
145
  * Owl Carousel - Video Plugin
146
  */
147
- .owl-carousel .owl-video-wrapper {
148
  position: relative;
149
  height: 100%;
150
  background: #000; }
151
 
152
- .owl-carousel .owl-video-play-icon {
153
  position: absolute;
154
  height: 80px;
155
  width: 80px;
@@ -163,15 +163,15 @@
163
  -webkit-backface-visibility: hidden;
164
  transition: transform 100ms ease; }
165
 
166
- .owl-carousel .owl-video-play-icon:hover {
167
  -ms-transform: scale(1.3, 1.3);
168
  transform: scale(1.3, 1.3); }
169
 
170
- .owl-carousel .owl-video-playing .owl-video-tn,
171
- .owl-carousel .owl-video-playing .owl-video-play-icon {
172
  display: none; }
173
 
174
- .owl-carousel .owl-video-tn {
175
  opacity: 0;
176
  height: 100%;
177
  background-position: center center;
@@ -179,7 +179,7 @@
179
  background-size: contain;
180
  transition: opacity 400ms ease; }
181
 
182
- .owl-carousel .owl-video-frame {
183
  position: relative;
184
  z-index: 1;
185
  height: 100%;
6
  /*
7
  * Owl Carousel - Core
8
  */
9
+ .vrowl-carousel {
10
  display: none;
11
  width: 100%;
12
  -webkit-tap-highlight-color: transparent;
13
  /* position relative and z-index fix webkit rendering fonts issue */
14
  position: relative;
15
  z-index: 1; }
16
+ .vrowl-carousel .owl-stage {
17
  position: relative;
18
  -ms-touch-action: pan-Y;
19
  touch-action: manipulation;
20
  -moz-backface-visibility: hidden;
21
  /* fix firefox animation glitch */ }
22
+ .vrowl-carousel .owl-stage:after {
23
  content: ".";
24
  display: block;
25
  clear: both;
26
  visibility: hidden;
27
  line-height: 0;
28
  height: 0; }
29
+ .vrowl-carousel .owl-stage-outer {
30
  position: relative;
31
  overflow: hidden;
32
  /* fix for flashing background */
33
  -webkit-transform: translate3d(0px, 0px, 0px); }
34
+ .vrowl-carousel .owl-wrapper,
35
+ .vrowl-carousel .owl-item {
36
  -webkit-backface-visibility: hidden;
37
  -moz-backface-visibility: hidden;
38
  -ms-backface-visibility: hidden;
39
  -webkit-transform: translate3d(0, 0, 0);
40
  -moz-transform: translate3d(0, 0, 0);
41
  -ms-transform: translate3d(0, 0, 0); }
42
+ .vrowl-carousel .owl-item {
43
  position: relative;
44
  min-height: 1px;
45
  float: left;
46
  -webkit-backface-visibility: hidden;
47
  -webkit-tap-highlight-color: transparent;
48
  -webkit-touch-callout: none; }
49
+ .vrowl-carousel .owl-item img {
50
  display: block;
51
  width: 100%; }
52
+ .vrowl-carousel .owl-nav.disabled,
53
+ .vrowl-carousel .owl-dots.disabled {
54
  display: none; }
55
+ .vrowl-carousel .owl-nav .owl-prev,
56
+ .vrowl-carousel .owl-nav .owl-next,
57
+ .vrowl-carousel .owl-dot {
58
  cursor: pointer;
59
  -webkit-user-select: none;
60
  -khtml-user-select: none;
61
  -moz-user-select: none;
62
  -ms-user-select: none;
63
  user-select: none; }
64
+ .vrowl-carousel .owl-nav button.owl-prev,
65
+ .vrowl-carousel .owl-nav button.owl-next,
66
+ .vrowl-carousel button.owl-dot {
67
  background: none;
68
  color: inherit;
69
  border: none;
70
  padding: 0 !important;
71
  font: inherit; }
72
+ .vrowl-carousel.owl-loaded {
73
  display: block; }
74
+ .vrowl-carousel.owl-loading {
75
  opacity: 0;
76
  display: block; }
77
+ .vrowl-carousel.owl-hidden {
78
  opacity: 0; }
79
+ .vrowl-carousel.owl-refresh .owl-item {
80
  visibility: hidden; }
81
+ .vrowl-carousel.owl-drag .owl-item {
82
  -ms-touch-action: pan-y;
83
  touch-action: pan-y;
84
  -webkit-user-select: none;
85
  -moz-user-select: none;
86
  -ms-user-select: none;
87
  user-select: none; }
88
+ .vrowl-carousel.owl-grab {
89
  cursor: move;
90
  cursor: grab; }
91
+ .vrowl-carousel.owl-rtl {
92
  direction: rtl; }
93
+ .vrowl-carousel.owl-rtl .owl-item {
94
  float: right; }
95
 
96
  /* No Js */
97
+ .no-js .vrowl-carousel {
98
  display: block; }
99
 
100
  /*
101
  * Owl Carousel - Animate Plugin
102
  */
103
+ .vrowl-carousel .animated {
104
  animation-duration: 1000ms;
105
  animation-fill-mode: both; }
106
 
107
+ .vrowl-carousel .owl-animated-in {
108
  z-index: 0; }
109
 
110
+ .vrowl-carousel .owl-animated-out {
111
  z-index: 1; }
112
 
113
+ .vrowl-carousel .fadeOut {
114
  animation-name: fadeOut; }
115
 
116
  @keyframes fadeOut {
128
  /*
129
  * Owl Carousel - Lazy Load Plugin
130
  */
131
+ .vrowl-carousel .owl-item {
132
  /**
133
  This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
134
  calculation of the height of the owl-item that breaks page layouts
135
  */ }
136
+ .vrowl-carousel .owl-item .owl-lazy {
137
  opacity: 0;
138
  transition: opacity 400ms ease; }
139
+ .vrowl-carousel .owl-item .owl-lazy[src^=""], .vrowl-carousel .owl-item .owl-lazy:not([src]) {
140
  max-height: 0; }
141
+ .vrowl-carousel .owl-item img.owl-lazy {
142
  transform-style: preserve-3d; }
143
 
144
  /*
145
  * Owl Carousel - Video Plugin
146
  */
147
+ .vrowl-carousel .owl-video-wrapper {
148
  position: relative;
149
  height: 100%;
150
  background: #000; }
151
 
152
+ .vrowl-carousel .owl-video-play-icon {
153
  position: absolute;
154
  height: 80px;
155
  width: 80px;
163
  -webkit-backface-visibility: hidden;
164
  transition: transform 100ms ease; }
165
 
166
+ .vrowl-carousel .owl-video-play-icon:hover {
167
  -ms-transform: scale(1.3, 1.3);
168
  transform: scale(1.3, 1.3); }
169
 
170
+ .vrowl-carousel .owl-video-playing .owl-video-tn,
171
+ .vrowl-carousel .owl-video-playing .owl-video-play-icon {
172
  display: none; }
173
 
174
+ .vrowl-carousel .owl-video-tn {
175
  opacity: 0;
176
  height: 100%;
177
  background-position: center center;
179
  background-size: contain;
180
  transition: opacity 400ms ease; }
181
 
182
+ .vrowl-carousel .owl-video-frame {
183
  position: relative;
184
  z-index: 1;
185
  height: 100%;
public/css/wpvr-public.css CHANGED
@@ -11,6 +11,59 @@ div.pnlm-hotspot-base.far:before{
11
  top: 50%;
12
  transform: translate(-50%, -50%);
13
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
 
15
  .scene-gallery ul {
16
  display: inline-grid;
11
  top: 50%;
12
  transform: translate(-50%, -50%);
13
  }
14
+ .vrbounce {
15
+ display: inline-block;
16
+ position: relative;
17
+ -moz-animation: vrbounce 0.5s infinite linear;
18
+ -o-animation: vrbounce 0.5s infinite linear;
19
+ -webkit-animation: vrbounce 0.5s infinite linear;
20
+ animation: vrbounce 0.5s infinite linear;
21
+ colr:000;
22
+ }
23
+ @-webkit-keyframes vrbounce {
24
+ 0% { top: 0; }
25
+ 50% { top: -0.2em; }
26
+ 70% { top: -0.3em; }
27
+ 100% { top: 0; }
28
+ }
29
+ @-moz-keyframes vrbounce {
30
+ 0% { top: 0; }
31
+ 50% { top: -0.2em; }
32
+ 70% { top: -0.3em; }
33
+ 100% { top: 0; }
34
+ }
35
+ @-o-keyframes vrbounce {
36
+ 0% { top: 0; }
37
+ 50% { top: -0.2em; }
38
+ 70% { top: -0.3em; }
39
+ 100% { top: 0; }
40
+ }
41
+ @-ms-keyframes vrbounce {
42
+ 0% { top: 0; }
43
+ 50% { top: -0.2em; }
44
+ 70% { top: -0.3em; }
45
+ 100% { top: 0; }
46
+ }
47
+ @keyframes vrbounce {
48
+ 0% { top: 0; }
49
+ 50% { top: -0.2em; }
50
+ 70% { top: -0.3em; }
51
+ 100% { top: 0; }
52
+ }
53
+ #vrgcontrols {
54
+ position: absolute;
55
+ z-index: 3;
56
+ width: 100%;
57
+ bottom: 0;
58
+ height: 30px;
59
+ cursor: pointer;
60
+ }
61
+ .vrgctrl {
62
+ color: #fff;
63
+ display: inline-block;
64
+ cursor: pointer;
65
+ padding-top: 10px;
66
+ }
67
 
68
  .scene-gallery ul {
69
  display: inline-grid;
wpvr.php CHANGED
@@ -16,7 +16,7 @@
16
  * Plugin Name: WP VR
17
  * Plugin URI: https://rextheme.com/wpvr/
18
  * Description: WP VR - 360 Panorama and virtual tour creator for WordPress is a customized panaroma & virtual builder tool for WordPress Website.
19
- * Version: 3.1.0
20
  * Author: Rextheme
21
  * Author URI: http://rextheme.com/
22
  * License: GPL-2.0+
@@ -129,10 +129,10 @@ function wpvr_block() {
129
  array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' )
130
  );
131
  wp_enqueue_style(
132
- 'gutyblocks/guty-block',
133
  plugins_url( 'src/view.css', __FILE__ ),
134
  array()
135
- );
136
 
137
  if (function_exists('register_block_type')) {
138
  register_block_type( 'wpvr/wpvr-block', array(
@@ -515,15 +515,15 @@ function wpvr_block_render( $attributes ) {
515
  }
516
 
517
  $foreground_color = '#fff';
518
- $pulse_color = wpvr_hex2rgb($hotspoticoncolor);
519
- $rgb = wpvr_HTMLToRGB($hotspoticoncolor);
520
- $hsl = wpvr_RGBToHSL($rgb);
521
- if($hsl->lightness > 200) {
522
- $foreground_color = '#000000';
523
- }
524
- else {
525
- $foreground_color = '#fff';
526
- }
527
 
528
  $class = 'myclass';
529
  $html = 'test';
@@ -588,12 +588,18 @@ function wpvr_block_render( $attributes ) {
588
  }
589
  if ($vrgallery) {
590
  //===Carousal setup===//
591
- $html .= '<div id="sccontrols" class="scene-gallery owl-carousel owl-theme">';
 
 
 
 
 
 
592
  if (isset($panodata["scene-list"])) {
593
  foreach ($panodata["scene-list"] as $panoscenes) {
594
  $scene_key = $panoscenes['scene-id'];
595
  $img_src_url = $panoscenes['scene-attachment-url'];
596
- $html .= '<ul style="width:150px;"><li><img class="scctrl" id="'.$scene_key.'_gallery_'.$id.'" src="'.$img_src_url.'"></li></ul>';
597
  }
598
  }
599
  $html .= '</div>';
@@ -624,13 +630,25 @@ function wpvr_block_render( $attributes ) {
624
  $html .= '}';
625
  $html .= '}';
626
  $html .= 'var panoshow'.$id.' = pannellum.viewer(response[0]["panoid"], scenes);';
 
627
  if ($vrgallery) {
628
  if (isset($panodata["scene-list"])) {
629
  foreach ($panodata["scene-list"] as $panoscenes) {
630
  $scene_key = $panoscenes['scene-id'];
631
  $scene_key_gallery = $panoscenes['scene-id'].'_gallery_'.$id;
632
  $img_src_url = $panoscenes['scene-attachment-url'];
633
- $html .= 'document.getElementById("'.$scene_key_gallery.'").addEventListener("dblclick", function(e) { panoshow'.$id.'.loadScene("'.$scene_key.'"); });';
 
 
 
 
 
 
 
 
 
 
 
634
  }
635
  }
636
  }
16
  * Plugin Name: WP VR
17
  * Plugin URI: https://rextheme.com/wpvr/
18
  * Description: WP VR - 360 Panorama and virtual tour creator for WordPress is a customized panaroma & virtual builder tool for WordPress Website.
19
+ * Version: 3.2.0
20
  * Author: Rextheme
21
  * Author URI: http://rextheme.com/
22
  * License: GPL-2.0+
129
  array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' )
130
  );
131
  wp_enqueue_style(
132
+ 'gutyblocks/guty-block',
133
  plugins_url( 'src/view.css', __FILE__ ),
134
  array()
135
+ );
136
 
137
  if (function_exists('register_block_type')) {
138
  register_block_type( 'wpvr/wpvr-block', array(
515
  }
516
 
517
  $foreground_color = '#fff';
518
+ $pulse_color = wpvr_hex2rgb($hotspoticoncolor);
519
+ $rgb = wpvr_HTMLToRGB($hotspoticoncolor);
520
+ $hsl = wpvr_RGBToHSL($rgb);
521
+ if($hsl->lightness > 200) {
522
+ $foreground_color = '#000000';
523
+ }
524
+ else {
525
+ $foreground_color = '#fff';
526
+ }
527
 
528
  $class = 'myclass';
529
  $html = 'test';
588
  }
589
  if ($vrgallery) {
590
  //===Carousal setup===//
591
+ $html .= '<div id="vrgcontrols">';
592
+
593
+ $html .= '<div class="vrgctrl vrbounce">';
594
+ $html .= '</div>';
595
+ $html .= '</div>';
596
+
597
+ $html .= '<div id="sccontrols" class="scene-gallery vrowl-carousel owl-theme">';
598
  if (isset($panodata["scene-list"])) {
599
  foreach ($panodata["scene-list"] as $panoscenes) {
600
  $scene_key = $panoscenes['scene-id'];
601
  $img_src_url = $panoscenes['scene-attachment-url'];
602
+ $html .= '<ul style="width:150px;"><li title="Double click to view scene"><img class="scctrl" id="'.$scene_key.'_gallery_'.$id.'" src="'.$img_src_url.'"></li></ul>';
603
  }
604
  }
605
  $html .= '</div>';
630
  $html .= '}';
631
  $html .= '}';
632
  $html .= 'var panoshow'.$id.' = pannellum.viewer(response[0]["panoid"], scenes);';
633
+ $html .= 'var touchtime = 0;';
634
  if ($vrgallery) {
635
  if (isset($panodata["scene-list"])) {
636
  foreach ($panodata["scene-list"] as $panoscenes) {
637
  $scene_key = $panoscenes['scene-id'];
638
  $scene_key_gallery = $panoscenes['scene-id'].'_gallery_'.$id;
639
  $img_src_url = $panoscenes['scene-attachment-url'];
640
+ $html .= 'document.getElementById("'.$scene_key_gallery.'").addEventListener("click", function(e) { ';
641
+ $html .= 'if (touchtime == 0) {';
642
+ $html .= 'touchtime = new Date().getTime();';
643
+ $html .= '} else {';
644
+ $html .= 'if (((new Date().getTime()) - touchtime) < 800) {';
645
+ $html .= 'panoshow'.$id.'.loadScene("'.$scene_key.'");';
646
+ $html .= 'touchtime = 0;';
647
+ $html .= '} else {';
648
+ $html .= 'touchtime = new Date().getTime();';
649
+ $html .= '}';
650
+ $html .= '}';
651
+ $html .= '});';
652
  }
653
  }
654
  }