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

Version Description

(12-05-2020) = * Custom control conflict fixed * On click container fixed * Self hosted video pause on cross button

=

Download this release

Release Info

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

Code changes from version 5.4.0 to 5.5.0

Files changed (5) hide show
  1. README.txt +6 -1
  2. public/class-wpvr-public.php +25 -25
  3. public/css/wpvr-public.css +13 -15
  4. public/js/wpvr-public.js +4 -9
  5. wpvr.php +23 -23
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.4
7
- Stable tag: 5.4.0
8
  Requires PHP: 5.6
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -380,5 +380,10 @@ Simply add "/plugins/wpvr" to exclusion field (or use the location where you sto
380
  = 5.4.0 (27-04-2020) =
381
  * Device Orientation control fix
382
 
 
 
 
 
 
383
  == Upgrade Notice ==
384
  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.4
7
+ Stable tag: 5.5.0
8
  Requires PHP: 5.6
9
  License: GPLv2 or later
10
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
380
  = 5.4.0 (27-04-2020) =
381
  * Device Orientation control fix
382
 
383
+ = 5.5.0 (12-05-2020) =
384
+ * Custom control conflict fixed
385
+ * On click container fixed
386
+ * Self hosted video pause on cross button
387
+
388
  == Upgrade Notice ==
389
  Please do update the WP VR to the latest version. Each update makes it sure your plugin is supporting all tour features.  
public/class-wpvr-public.php CHANGED
@@ -777,18 +777,18 @@ class Wpvr_Public {
777
  $html .= '<div id="zoom-in-out-controls">';
778
 
779
  if ($custom_control['backToHomeSwitch'] == "on") {
780
- $html .= '<div class="ctrl" id="backToHome"><i class="'.$custom_control['backToHomeIcon'].'" style="color:'.$custom_control['backToHomeColor'].';"></i></div>';
781
  }
782
 
783
  if ($custom_control['panZoomInSwitch'] == "on") {
784
- $html .= '<div class="ctrl" id="zoom-in"><i class="'.$custom_control['panZoomInIcon'].'" style="color:'.$custom_control['panZoomInColor'].';"></i></div>';
785
  }
786
 
787
  if ($custom_control['panZoomOutSwitch'] == "on") {
788
- $html .= '<div class="ctrl" id="zoom-out"><i class="'.$custom_control['panZoomOutIcon'].'" style="color:'.$custom_control['panZoomOutColor'].';"></i></div>';
789
  }
790
  if ($custom_control['gyroscopeSwitch'] == "on") {
791
- $html .= '<div class="ctrl" id="gyroscope"><i class="'.$custom_control['gyroscopeIcon'].'" style="color:'.$custom_control['gyroscopeColor'].';"></i></div>';
792
  }
793
  $html .= '</div>';
794
  }
@@ -796,26 +796,26 @@ class Wpvr_Public {
796
 
797
  if ($custom_control['panupSwitch'] == "on" || $custom_control['panDownSwitch'] == "on" || $custom_control['panLeftSwitch'] == "on" || $custom_control['panRightSwitch'] == "on" || $custom_control['panFullscreenSwitch'] == "on") {
798
  //===Custom Control===//
799
- $html .= '<div id="controls">';
800
 
801
  if ($custom_control['panupSwitch'] == "on") {
802
- $html .= '<div class="ctrl" id="pan-up"><i class="'.$custom_control['panupIcon'].'" style="color:'.$custom_control['panupColor'].';"></i></div>';
803
  }
804
 
805
  if ($custom_control['panDownSwitch'] == "on") {
806
- $html .= '<div class="ctrl" id="pan-down"><i class="'.$custom_control['panDownIcon'].'" style="color:'.$custom_control['panDownColor'].';"></i></div>';
807
  }
808
 
809
  if ($custom_control['panLeftSwitch'] == "on") {
810
- $html .= '<div class="ctrl" id="pan-left"><i class="'.$custom_control['panLeftIcon'].'" style="color:'.$custom_control['panLeftColor'].';"></i></div>';
811
  }
812
 
813
  if ($custom_control['panRightSwitch'] == "on") {
814
- $html .= '<div class="ctrl" id="pan-right"><i class="'.$custom_control['panRightIcon'].'" style="color:'.$custom_control['panRightColor'].';"></i></div>';
815
  }
816
 
817
  if ($custom_control['panFullscreenSwitch'] == "on") {
818
- $html .= '<div class="ctrl" id="fullscreen"><i class="'.$custom_control['panFullscreenIcon'].'" style="color:'.$custom_control['panFullscreenColor'].';"></i></div>';
819
  }
820
  $html .= '</div>';
821
  }
@@ -876,12 +876,12 @@ class Wpvr_Public {
876
 
877
  $html .= 'var panoshow'.$id.' = pannellum.viewer(response[0]["panoid"], scenes);';
878
  $html .= 'panoshow'.$id.'.on("load", function (){
879
- if (jQuery(".pnlm-panorama-info:visible").length > 0) {
880
- jQuery("#controls").css("bottom", "55px");
881
- }
882
- else {
883
- jQuery("#controls").css("bottom", "5px");
884
- }
885
  });';
886
 
887
  $html .= '
@@ -920,55 +920,55 @@ class Wpvr_Public {
920
  //===Custom Control===//
921
  if (isset($custom_control)) {
922
  if ($custom_control['panupSwitch'] == "on") {
923
- $html .= 'document.getElementById("pan-up").addEventListener("click", function(e) {';
924
  $html .= 'panoshow'.$id.'.setPitch(panoshow'.$id.'.getPitch() + 10);';
925
  $html .= '});';
926
  }
927
 
928
  if ($custom_control['panDownSwitch'] == "on") {
929
- $html .= 'document.getElementById("pan-down").addEventListener("click", function(e) {';
930
  $html .= 'panoshow'.$id.'.setPitch(panoshow'.$id.'.getPitch() - 10);';
931
  $html .= '});';
932
  }
933
 
934
  if ($custom_control['panLeftSwitch'] == "on") {
935
- $html .= 'document.getElementById("pan-left").addEventListener("click", function(e) {';
936
  $html .= 'panoshow'.$id.'.setYaw(panoshow'.$id.'.getYaw() - 10);';
937
  $html .= '});';
938
  }
939
 
940
  if ($custom_control['panRightSwitch'] == "on") {
941
- $html .= 'document.getElementById("pan-right").addEventListener("click", function(e) {';
942
  $html .= 'panoshow'.$id.'.setYaw(panoshow'.$id.'.getYaw() + 10);';
943
  $html .= '});';
944
  }
945
 
946
  if ($custom_control['panZoomInSwitch'] == "on") {
947
- $html .= 'document.getElementById("zoom-in").addEventListener("click", function(e) {';
948
  $html .= 'panoshow'.$id.'.setHfov(panoshow'.$id.'.getHfov() - 10);';
949
  $html .= '});';
950
  }
951
 
952
  if ($custom_control['panZoomOutSwitch'] == "on") {
953
- $html .= 'document.getElementById("zoom-out").addEventListener("click", function(e) {';
954
  $html .= 'panoshow'.$id.'.setHfov(panoshow'.$id.'.getHfov() + 10);';
955
  $html .= '});';
956
  }
957
 
958
  if ($custom_control['panFullscreenSwitch'] == "on") {
959
- $html .= 'document.getElementById("fullscreen").addEventListener("click", function(e) {';
960
  $html .= 'panoshow'.$id.'.toggleFullscreen();';
961
  $html .= '});';
962
  }
963
 
964
  if ($custom_control['backToHomeSwitch'] == "on") {
965
- $html .= 'document.getElementById("backToHome").addEventListener("click", function(e) {';
966
  $html .= 'panoshow'.$id.'.loadScene("'.$default_scene.'");';
967
  $html .= '});';
968
  }
969
 
970
  if ($custom_control['gyroscopeSwitch'] == "on") {
971
- $html .= 'document.getElementById("gyroscope").addEventListener("click", function(e) {';
972
  $html .= '
973
  if (panoshow'.$id.'.isOrientationActive()) {
974
  panoshow'.$id.'.stopOrientation();
777
  $html .= '<div id="zoom-in-out-controls">';
778
 
779
  if ($custom_control['backToHomeSwitch'] == "on") {
780
+ $html .= '<div class="ctrl" id="backToHome'.$id.'"><i class="'.$custom_control['backToHomeIcon'].'" style="color:'.$custom_control['backToHomeColor'].';"></i></div>';
781
  }
782
 
783
  if ($custom_control['panZoomInSwitch'] == "on") {
784
+ $html .= '<div class="ctrl" id="zoom-in'.$id.'"><i class="'.$custom_control['panZoomInIcon'].'" style="color:'.$custom_control['panZoomInColor'].';"></i></div>';
785
  }
786
 
787
  if ($custom_control['panZoomOutSwitch'] == "on") {
788
+ $html .= '<div class="ctrl" id="zoom-out'.$id.'"><i class="'.$custom_control['panZoomOutIcon'].'" style="color:'.$custom_control['panZoomOutColor'].';"></i></div>';
789
  }
790
  if ($custom_control['gyroscopeSwitch'] == "on") {
791
+ $html .= '<div class="ctrl" id="gyroscope'.$id.'"><i class="'.$custom_control['gyroscopeIcon'].'" style="color:'.$custom_control['gyroscopeColor'].';"></i></div>';
792
  }
793
  $html .= '</div>';
794
  }
796
 
797
  if ($custom_control['panupSwitch'] == "on" || $custom_control['panDownSwitch'] == "on" || $custom_control['panLeftSwitch'] == "on" || $custom_control['panRightSwitch'] == "on" || $custom_control['panFullscreenSwitch'] == "on") {
798
  //===Custom Control===//
799
+ $html .= '<div class="controls" id="controls'.$id.'">';
800
 
801
  if ($custom_control['panupSwitch'] == "on") {
802
+ $html .= '<div class="ctrl pan-up" id="pan-up'.$id.'"><i class="'.$custom_control['panupIcon'].'" style="color:'.$custom_control['panupColor'].';"></i></div>';
803
  }
804
 
805
  if ($custom_control['panDownSwitch'] == "on") {
806
+ $html .= '<div class="ctrl pan-down" id="pan-down'.$id.'"><i class="'.$custom_control['panDownIcon'].'" style="color:'.$custom_control['panDownColor'].';"></i></div>';
807
  }
808
 
809
  if ($custom_control['panLeftSwitch'] == "on") {
810
+ $html .= '<div class="ctrl pan-left" id="pan-left'.$id.'"><i class="'.$custom_control['panLeftIcon'].'" style="color:'.$custom_control['panLeftColor'].';"></i></div>';
811
  }
812
 
813
  if ($custom_control['panRightSwitch'] == "on") {
814
+ $html .= '<div class="ctrl pan-right" id="pan-right'.$id.'"><i class="'.$custom_control['panRightIcon'].'" style="color:'.$custom_control['panRightColor'].';"></i></div>';
815
  }
816
 
817
  if ($custom_control['panFullscreenSwitch'] == "on") {
818
+ $html .= '<div class="ctrl fullscreen" id="fullscreen'.$id.'"><i class="'.$custom_control['panFullscreenIcon'].'" style="color:'.$custom_control['panFullscreenColor'].';"></i></div>';
819
  }
820
  $html .= '</div>';
821
  }
876
 
877
  $html .= 'var panoshow'.$id.' = pannellum.viewer(response[0]["panoid"], scenes);';
878
  $html .= 'panoshow'.$id.'.on("load", function (){
879
+ if (jQuery("#pano'.$id.'").children().children(".pnlm-panorama-info:visible").length > 0) {
880
+ jQuery("#controls'.$id.'").css("bottom", "55px");
881
+ }
882
+ else {
883
+ jQuery("#controls'.$id.'").css("bottom", "5px");
884
+ }
885
  });';
886
 
887
  $html .= '
920
  //===Custom Control===//
921
  if (isset($custom_control)) {
922
  if ($custom_control['panupSwitch'] == "on") {
923
+ $html .= 'document.getElementById("pan-up'.$id.'").addEventListener("click", function(e) {';
924
  $html .= 'panoshow'.$id.'.setPitch(panoshow'.$id.'.getPitch() + 10);';
925
  $html .= '});';
926
  }
927
 
928
  if ($custom_control['panDownSwitch'] == "on") {
929
+ $html .= 'document.getElementById("pan-down'.$id.'").addEventListener("click", function(e) {';
930
  $html .= 'panoshow'.$id.'.setPitch(panoshow'.$id.'.getPitch() - 10);';
931
  $html .= '});';
932
  }
933
 
934
  if ($custom_control['panLeftSwitch'] == "on") {
935
+ $html .= 'document.getElementById("pan-left'.$id.'").addEventListener("click", function(e) {';
936
  $html .= 'panoshow'.$id.'.setYaw(panoshow'.$id.'.getYaw() - 10);';
937
  $html .= '});';
938
  }
939
 
940
  if ($custom_control['panRightSwitch'] == "on") {
941
+ $html .= 'document.getElementById("pan-right'.$id.'").addEventListener("click", function(e) {';
942
  $html .= 'panoshow'.$id.'.setYaw(panoshow'.$id.'.getYaw() + 10);';
943
  $html .= '});';
944
  }
945
 
946
  if ($custom_control['panZoomInSwitch'] == "on") {
947
+ $html .= 'document.getElementById("zoom-in'.$id.'").addEventListener("click", function(e) {';
948
  $html .= 'panoshow'.$id.'.setHfov(panoshow'.$id.'.getHfov() - 10);';
949
  $html .= '});';
950
  }
951
 
952
  if ($custom_control['panZoomOutSwitch'] == "on") {
953
+ $html .= 'document.getElementById("zoom-out'.$id.'").addEventListener("click", function(e) {';
954
  $html .= 'panoshow'.$id.'.setHfov(panoshow'.$id.'.getHfov() + 10);';
955
  $html .= '});';
956
  }
957
 
958
  if ($custom_control['panFullscreenSwitch'] == "on") {
959
+ $html .= 'document.getElementById("fullscreen'.$id.'").addEventListener("click", function(e) {';
960
  $html .= 'panoshow'.$id.'.toggleFullscreen();';
961
  $html .= '});';
962
  }
963
 
964
  if ($custom_control['backToHomeSwitch'] == "on") {
965
+ $html .= 'document.getElementById("backToHome'.$id.'").addEventListener("click", function(e) {';
966
  $html .= 'panoshow'.$id.'.loadScene("'.$default_scene.'");';
967
  $html .= '});';
968
  }
969
 
970
  if ($custom_control['gyroscopeSwitch'] == "on") {
971
+ $html .= 'document.getElementById("gyroscope'.$id.'").addEventListener("click", function(e) {';
972
  $html .= '
973
  if (panoshow'.$id.'.isOrientationActive()) {
974
  panoshow'.$id.'.stopOrientation();
public/css/wpvr-public.css CHANGED
@@ -19,13 +19,6 @@
19
  max-width: 100px;
20
  margin-left: auto;
21
  }
22
- /* .cp-logo-ctrl {
23
- max-width: 100px;
24
- height: auto;
25
- display: inline-block;
26
- cursor: pointer;
27
- margin: 0 auto;
28
- } */
29
 
30
  #cp-logo-controls .cp-logo-ctrl .cp-info {
31
  font-size: 15px;
@@ -74,7 +67,7 @@
74
  padding: 2px 0;
75
  }
76
 
77
- #controls {
78
  position: absolute;
79
  bottom: 5px;
80
  left: 5px;
@@ -99,30 +92,30 @@
99
  background: none;
100
  }
101
 
102
- #controls .ctrl {
103
  position: absolute;
104
  }
105
- #pan-up {
106
  left: 50%;
107
  top: 0;
108
  transform: translateX(-50%);
109
  }
110
- #pan-down {
111
  bottom: 0;
112
  left: 50%;
113
  transform: translateX(-50%);
114
  }
115
- #pan-left {
116
  left: 0;
117
  top: 50%;
118
  transform: translateY(-50%);
119
  }
120
- #pan-right {
121
  right: 0;
122
  top: 50%;
123
  transform: translateY(-50%);
124
  }
125
- #fullscreen {
126
  top: 50%;
127
  left: 50%;
128
  transform: translate(-50%, -50%);
@@ -347,10 +340,15 @@ div.custom-ifram {
347
  border-radius: 5px;
348
  font-size: 15px;
349
  line-height: 24px;
350
- /*font-family: Helvetica, "Nimbus Sans L", "Liberation Sans", Arial, sans-serif;*/
351
  }
352
  .custom-ifram p{
353
  padding: 10px;
 
 
 
 
 
 
354
  }
355
 
356
  .custom-ifram img {
19
  max-width: 100px;
20
  margin-left: auto;
21
  }
 
 
 
 
 
 
 
22
 
23
  #cp-logo-controls .cp-logo-ctrl .cp-info {
24
  font-size: 15px;
67
  padding: 2px 0;
68
  }
69
 
70
+ .controls {
71
  position: absolute;
72
  bottom: 5px;
73
  left: 5px;
92
  background: none;
93
  }
94
 
95
+ .controls .ctrl {
96
  position: absolute;
97
  }
98
+ .pan-up {
99
  left: 50%;
100
  top: 0;
101
  transform: translateX(-50%);
102
  }
103
+ .pan-down {
104
  bottom: 0;
105
  left: 50%;
106
  transform: translateX(-50%);
107
  }
108
+ .pan-left {
109
  left: 0;
110
  top: 50%;
111
  transform: translateY(-50%);
112
  }
113
+ .pan-right {
114
  right: 0;
115
  top: 50%;
116
  transform: translateY(-50%);
117
  }
118
+ .fullscreen {
119
  top: 50%;
120
  left: 50%;
121
  transform: translate(-50%, -50%);
340
  border-radius: 5px;
341
  font-size: 15px;
342
  line-height: 24px;
 
343
  }
344
  .custom-ifram p{
345
  padding: 10px;
346
+ overflow-y: scroll;
347
+ max-height: 250px;
348
+ }
349
+
350
+ .custom-ifram video{
351
+ margin: 0 auto;
352
  }
353
 
354
  .custom-ifram img {
public/js/wpvr-public.js CHANGED
@@ -27,7 +27,7 @@
27
  * single DOM-ready or window-load handler for a particular page.
28
  * Although scripts in the WordPress core, Plugins and Themes may be
29
  * practising this, we should strive to set a better example in our own work.
30
- */
31
 
32
  })( jQuery );
33
 
@@ -37,7 +37,7 @@ function wpvrhotspot(hotSpotDiv, args) {
37
  $(hotSpotDiv.target).parent().siblings(".custom-ifram").html(argst);
38
  $(hotSpotDiv.target).parent().siblings(".custom-ifram").fadeToggle();
39
  $(hotSpotDiv.target).parent().parent(".pano-wrap").toggleClass("show-modal");
40
-
41
  });
42
  console.log(hotSpotDiv);
43
  }
@@ -54,17 +54,12 @@ function wpvrtooltip(hotSpotDiv, args) {
54
 
55
 
56
  jQuery(document).ready(function($){
57
-
58
  $(".cross").on("click", function(e){
59
  e.preventDefault();
60
  $(this).siblings(".custom-ifram").fadeOut();
61
  $(this).parent(".pano-wrap").removeClass("show-modal");
62
  $('iframe').attr('src', $('iframe').attr('src'));
 
63
  });
64
  });
65
- // jQuery(document).ready(function($){
66
- // $('.pnlm-orientation-button').hide();
67
- // });
68
-
69
-
70
-
27
  * single DOM-ready or window-load handler for a particular page.
28
  * Although scripts in the WordPress core, Plugins and Themes may be
29
  * practising this, we should strive to set a better example in our own work.
30
+ */
31
 
32
  })( jQuery );
33
 
37
  $(hotSpotDiv.target).parent().siblings(".custom-ifram").html(argst);
38
  $(hotSpotDiv.target).parent().siblings(".custom-ifram").fadeToggle();
39
  $(hotSpotDiv.target).parent().parent(".pano-wrap").toggleClass("show-modal");
40
+
41
  });
42
  console.log(hotSpotDiv);
43
  }
54
 
55
 
56
  jQuery(document).ready(function($){
57
+
58
  $(".cross").on("click", function(e){
59
  e.preventDefault();
60
  $(this).siblings(".custom-ifram").fadeOut();
61
  $(this).parent(".pano-wrap").removeClass("show-modal");
62
  $('iframe').attr('src', $('iframe').attr('src'));
63
+ $('#wpvr-video').get(0).pause();
64
  });
65
  });
 
 
 
 
 
 
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: 5.4.0
20
  * Author: Rextheme
21
  * Author URI: http://rextheme.com/
22
  * License: GPL-2.0+
@@ -739,19 +739,19 @@ function wpvr_block_render( $attributes ) {
739
  $html .= '<div id="zoom-in-out-controls">';
740
 
741
  if ($custom_control['backToHomeSwitch'] == "on") {
742
- $html .= '<div class="ctrl" id="backToHome"><i class="'.$custom_control['backToHomeIcon'].'" style="color:'.$custom_control['backToHomeColor'].';"></i></div>';
743
  }
744
 
745
  if ($custom_control['panZoomInSwitch'] == "on") {
746
- $html .= '<div class="ctrl" id="zoom-in"><i class="'.$custom_control['panZoomInIcon'].'" style="color:'.$custom_control['panZoomInColor'].';"></i></div>';
747
  }
748
 
749
  if ($custom_control['panZoomOutSwitch'] == "on") {
750
- $html .= '<div class="ctrl" id="zoom-out"><i class="'.$custom_control['panZoomOutIcon'].'" style="color:'.$custom_control['panZoomOutColor'].';"></i></div>';
751
  }
752
 
753
  if ($custom_control['gyroscopeSwitch'] == "on") {
754
- $html .= '<div class="ctrl" id="gyroscope"><i class="'.$custom_control['gyroscopeIcon'].'" style="color:'.$custom_control['gyroscopeColor'].';"></i></div>';
755
  }
756
 
757
  $html .= '</div>';
@@ -761,26 +761,26 @@ function wpvr_block_render( $attributes ) {
761
  if ($custom_control['panupSwitch'] == "on" || $custom_control['panDownSwitch'] == "on" || $custom_control['panLeftSwitch'] == "on" || $custom_control['panRightSwitch'] == "on" || $custom_control['panFullscreenSwitch'] == "on") {
762
 
763
  //===Custom Control===//
764
- $html .= '<div id="controls">';
765
 
766
  if ($custom_control['panupSwitch'] == "on") {
767
- $html .= '<div class="ctrl" id="pan-up"><i class="'.$custom_control['panupIcon'].'" style="color:'.$custom_control['panupColor'].';"></i></div>';
768
  }
769
 
770
  if ($custom_control['panDownSwitch'] == "on") {
771
- $html .= '<div class="ctrl" id="pan-down"><i class="'.$custom_control['panDownIcon'].'" style="color:'.$custom_control['panDownColor'].';"></i></div>';
772
  }
773
 
774
  if ($custom_control['panLeftSwitch'] == "on") {
775
- $html .= '<div class="ctrl" id="pan-left"><i class="'.$custom_control['panLeftIcon'].'" style="color:'.$custom_control['panLeftColor'].';"></i></div>';
776
  }
777
 
778
  if ($custom_control['panRightSwitch'] == "on") {
779
- $html .= '<div class="ctrl" id="pan-right"><i class="'.$custom_control['panRightIcon'].'" style="color:'.$custom_control['panRightColor'].';"></i></div>';
780
  }
781
 
782
  if ($custom_control['panFullscreenSwitch'] == "on") {
783
- $html .= '<div class="ctrl" id="fullscreen"><i class="'.$custom_control['panFullscreenIcon'].'" style="color:'.$custom_control['panFullscreenColor'].';"></i></div>';
784
  }
785
  $html .= '</div>';
786
  }
@@ -840,11 +840,11 @@ function wpvr_block_render( $attributes ) {
840
  $html .= 'var panoshow'.$id.' = pannellum.viewer(response[0]["panoid"], scenes);';
841
 
842
  $html .= 'panoshow'.$id.'.on("load", function (){
843
- if (jQuery(".pnlm-panorama-info:visible").length > 0) {
844
- jQuery("#controls").css("bottom", "55px");
845
  }
846
  else {
847
- jQuery("#controls").css("bottom", "5px");
848
  }
849
  });';
850
  $html .= '
@@ -883,55 +883,55 @@ function wpvr_block_render( $attributes ) {
883
  //===Custom Control===//
884
  if (isset($custom_control)) {
885
  if ($custom_control['panupSwitch'] == "on") {
886
- $html .= 'document.getElementById("pan-up").addEventListener("click", function(e) {';
887
  $html .= 'panoshow'.$id.'.setPitch(panoshow'.$id.'.getPitch() + 10);';
888
  $html .= '});';
889
  }
890
 
891
  if ($custom_control['panDownSwitch'] == "on") {
892
- $html .= 'document.getElementById("pan-down").addEventListener("click", function(e) {';
893
  $html .= 'panoshow'.$id.'.setPitch(panoshow'.$id.'.getPitch() - 10);';
894
  $html .= '});';
895
  }
896
 
897
  if ($custom_control['panLeftSwitch'] == "on") {
898
- $html .= 'document.getElementById("pan-left").addEventListener("click", function(e) {';
899
  $html .= 'panoshow'.$id.'.setYaw(panoshow'.$id.'.getYaw() - 10);';
900
  $html .= '});';
901
  }
902
 
903
  if ($custom_control['panRightSwitch'] == "on") {
904
- $html .= 'document.getElementById("pan-right").addEventListener("click", function(e) {';
905
  $html .= 'panoshow'.$id.'.setYaw(panoshow'.$id.'.getYaw() + 10);';
906
  $html .= '});';
907
  }
908
 
909
  if ($custom_control['panZoomInSwitch'] == "on") {
910
- $html .= 'document.getElementById("zoom-in").addEventListener("click", function(e) {';
911
  $html .= 'panoshow'.$id.'.setHfov(panoshow'.$id.'.getHfov() - 10);';
912
  $html .= '});';
913
  }
914
 
915
  if ($custom_control['panZoomOutSwitch'] == "on") {
916
- $html .= 'document.getElementById("zoom-out").addEventListener("click", function(e) {';
917
  $html .= 'panoshow'.$id.'.setHfov(panoshow'.$id.'.getHfov() + 10);';
918
  $html .= '});';
919
  }
920
 
921
  if ($custom_control['panFullscreenSwitch'] == "on") {
922
- $html .= 'document.getElementById("fullscreen").addEventListener("click", function(e) {';
923
  $html .= 'panoshow'.$id.'.toggleFullscreen();';
924
  $html .= '});';
925
  }
926
 
927
  if ($custom_control['backToHomeSwitch'] == "on") {
928
- $html .= 'document.getElementById("backToHome").addEventListener("click", function(e) {';
929
  $html .= 'panoshow'.$id.'.loadScene("'.$default_scene.'");';
930
  $html .= '});';
931
  }
932
 
933
  if ($custom_control['gyroscopeSwitch'] == "on") {
934
- $html .= 'document.getElementById("gyroscope").addEventListener("click", function(e) {';
935
  $html .= '
936
  if (panoshow'.$id.'.isOrientationActive()) {
937
  panoshow'.$id.'.stopOrientation();
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: 5.5.0
20
  * Author: Rextheme
21
  * Author URI: http://rextheme.com/
22
  * License: GPL-2.0+
739
  $html .= '<div id="zoom-in-out-controls">';
740
 
741
  if ($custom_control['backToHomeSwitch'] == "on") {
742
+ $html .= '<div class="ctrl" id="backToHome'.$id.'"><i class="'.$custom_control['backToHomeIcon'].'" style="color:'.$custom_control['backToHomeColor'].';"></i></div>';
743
  }
744
 
745
  if ($custom_control['panZoomInSwitch'] == "on") {
746
+ $html .= '<div class="ctrl" id="zoom-in'.$id.'"><i class="'.$custom_control['panZoomInIcon'].'" style="color:'.$custom_control['panZoomInColor'].';"></i></div>';
747
  }
748
 
749
  if ($custom_control['panZoomOutSwitch'] == "on") {
750
+ $html .= '<div class="ctrl" id="zoom-out'.$id.'"><i class="'.$custom_control['panZoomOutIcon'].'" style="color:'.$custom_control['panZoomOutColor'].';"></i></div>';
751
  }
752
 
753
  if ($custom_control['gyroscopeSwitch'] == "on") {
754
+ $html .= '<div class="ctrl" id="gyroscope'.$id.'"><i class="'.$custom_control['gyroscopeIcon'].'" style="color:'.$custom_control['gyroscopeColor'].';"></i></div>';
755
  }
756
 
757
  $html .= '</div>';
761
  if ($custom_control['panupSwitch'] == "on" || $custom_control['panDownSwitch'] == "on" || $custom_control['panLeftSwitch'] == "on" || $custom_control['panRightSwitch'] == "on" || $custom_control['panFullscreenSwitch'] == "on") {
762
 
763
  //===Custom Control===//
764
+ $html .= '<div class="controls" id="controls'.$id.'">';
765
 
766
  if ($custom_control['panupSwitch'] == "on") {
767
+ $html .= '<div class="ctrl pan-up" id="pan-up'.$id.'"><i class="'.$custom_control['panupIcon'].'" style="color:'.$custom_control['panupColor'].';"></i></div>';
768
  }
769
 
770
  if ($custom_control['panDownSwitch'] == "on") {
771
+ $html .= '<div class="ctrl pan-down" id="pan-down'.$id.'"><i class="'.$custom_control['panDownIcon'].'" style="color:'.$custom_control['panDownColor'].';"></i></div>';
772
  }
773
 
774
  if ($custom_control['panLeftSwitch'] == "on") {
775
+ $html .= '<div class="ctrl pan-left" id="pan-left'.$id.'"><i class="'.$custom_control['panLeftIcon'].'" style="color:'.$custom_control['panLeftColor'].';"></i></div>';
776
  }
777
 
778
  if ($custom_control['panRightSwitch'] == "on") {
779
+ $html .= '<div class="ctrl pan-right" id="pan-right'.$id.'"><i class="'.$custom_control['panRightIcon'].'" style="color:'.$custom_control['panRightColor'].';"></i></div>';
780
  }
781
 
782
  if ($custom_control['panFullscreenSwitch'] == "on") {
783
+ $html .= '<div class="ctrl fullscreen" id="fullscreen'.$id.'"><i class="'.$custom_control['panFullscreenIcon'].'" style="color:'.$custom_control['panFullscreenColor'].';"></i></div>';
784
  }
785
  $html .= '</div>';
786
  }
840
  $html .= 'var panoshow'.$id.' = pannellum.viewer(response[0]["panoid"], scenes);';
841
 
842
  $html .= 'panoshow'.$id.'.on("load", function (){
843
+ if (jQuery("#pano'.$id.'").children().children(".pnlm-panorama-info:visible").length > 0) {
844
+ jQuery("#controls'.$id.'").css("bottom", "55px");
845
  }
846
  else {
847
+ jQuery("#controls'.$id.'").css("bottom", "5px");
848
  }
849
  });';
850
  $html .= '
883
  //===Custom Control===//
884
  if (isset($custom_control)) {
885
  if ($custom_control['panupSwitch'] == "on") {
886
+ $html .= 'document.getElementById("pan-up'.$id.'").addEventListener("click", function(e) {';
887
  $html .= 'panoshow'.$id.'.setPitch(panoshow'.$id.'.getPitch() + 10);';
888
  $html .= '});';
889
  }
890
 
891
  if ($custom_control['panDownSwitch'] == "on") {
892
+ $html .= 'document.getElementById("pan-down'.$id.'").addEventListener("click", function(e) {';
893
  $html .= 'panoshow'.$id.'.setPitch(panoshow'.$id.'.getPitch() - 10);';
894
  $html .= '});';
895
  }
896
 
897
  if ($custom_control['panLeftSwitch'] == "on") {
898
+ $html .= 'document.getElementById("pan-left'.$id.'").addEventListener("click", function(e) {';
899
  $html .= 'panoshow'.$id.'.setYaw(panoshow'.$id.'.getYaw() - 10);';
900
  $html .= '});';
901
  }
902
 
903
  if ($custom_control['panRightSwitch'] == "on") {
904
+ $html .= 'document.getElementById("pan-right'.$id.'").addEventListener("click", function(e) {';
905
  $html .= 'panoshow'.$id.'.setYaw(panoshow'.$id.'.getYaw() + 10);';
906
  $html .= '});';
907
  }
908
 
909
  if ($custom_control['panZoomInSwitch'] == "on") {
910
+ $html .= 'document.getElementById("zoom-in'.$id.'").addEventListener("click", function(e) {';
911
  $html .= 'panoshow'.$id.'.setHfov(panoshow'.$id.'.getHfov() - 10);';
912
  $html .= '});';
913
  }
914
 
915
  if ($custom_control['panZoomOutSwitch'] == "on") {
916
+ $html .= 'document.getElementById("zoom-out'.$id.'").addEventListener("click", function(e) {';
917
  $html .= 'panoshow'.$id.'.setHfov(panoshow'.$id.'.getHfov() + 10);';
918
  $html .= '});';
919
  }
920
 
921
  if ($custom_control['panFullscreenSwitch'] == "on") {
922
+ $html .= 'document.getElementById("fullscreen'.$id.'").addEventListener("click", function(e) {';
923
  $html .= 'panoshow'.$id.'.toggleFullscreen();';
924
  $html .= '});';
925
  }
926
 
927
  if ($custom_control['backToHomeSwitch'] == "on") {
928
+ $html .= 'document.getElementById("backToHome'.$id.'").addEventListener("click", function(e) {';
929
  $html .= 'panoshow'.$id.'.loadScene("'.$default_scene.'");';
930
  $html .= '});';
931
  }
932
 
933
  if ($custom_control['gyroscopeSwitch'] == "on") {
934
+ $html .= 'document.getElementById("gyroscope'.$id.'").addEventListener("click", function(e) {';
935
  $html .= '
936
  if (panoshow'.$id.'.isOrientationActive()) {
937
  panoshow'.$id.'.stopOrientation();