{"id":59,"date":"2023-09-26T11:37:55","date_gmt":"2023-09-26T11:37:55","guid":{"rendered":"https:\/\/orricoquiles.es\/?p=59"},"modified":"2023-09-26T11:52:22","modified_gmt":"2023-09-26T11:52:22","slug":"wordpress-360-vr","status":"publish","type":"post","link":"https:\/\/orricoquiles.es\/index.php\/2023\/09\/26\/wordpress-360-vr\/","title":{"rendered":"WordPress 360 VR"},"content":{"rendered":"\n<p>Example<\/p>\n\n\n\n<p>[vr url=<a href=\"https:\/\/orricoquiles.es\/wp-content\/uploads\/2023\/09\/IMG_20230922_105014_00_merged-scaled.jpg\">path-to-photo.jpg<\/a> view=360]<\/p>\n\n\n<p>[vr url=https:\/\/orricoquiles.es\/wp-content\/uploads\/2023\/09\/IMG_20230922_105014_00_merged-scaled.jpg view=cinema]<\/p>\n\n\n<style>#pano36 div.pnlm-orientation-button {\n                    display: none;\n                }\n            .wpvr-floor-map .floor-plan-pointer.add-pulse:before {\n                border: 17px solid #cca92c;\n            }\n            @-webkit-keyframes pulse {\n                0% {\n                    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.7);\n                }\n                70% {\n                    -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);\n                }\n                100% {\n                    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);\n                }\n            }\n            @keyframes pulse {\n            0% {\n                -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.7);\n                box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.7);\n            }\n            70% {\n                -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);\n                box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);\n            }\n            100% {\n                -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);\n                box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);\n            }\n        }<\/style><div id=\"master-container\" class=\"wpvr-cardboard  \" style=\"max-width:600px; width: 100%; height: 400px; border-radius:; direction:ltr; \"><div id=\"pano236\" class=\"pano-wrap pano-left\" style=\"width: 49%; border-radius:\"><div id=\"center-pointer236\" class=\"vr-pointer-container\"><span class=\"center-pointer\"><\/span><\/div><\/div><div id=\"pano36\" class=\"pano-wrap pano-right\" style=\"width: 100%;\"><div class=\"explainer\" id=\"explainer36\" style=\"display: none\"><span class=\"close-explainer-video\"><i class=\"fa fa-times\"><\/i><\/span><\/div><div class=\"wpvr-floor-map\" id=\"wpvr-floor-map36\" style=\"display: none\"><span class=\"close-floor-map-plan\"><i class=\"fa fa-times\"><\/i><\/span><img decoding=\"async\" src=\"\"><\/div><div class=\"wpvr-hotspot-tweak-contents-wrapper\" style=\"display: none\"><i class=\"fa fa-times cross\" data-id=\"36\"><\/i><div class=\"wpvr-hotspot-tweak-contents-flex\"><div class=\"wpvr-hotspot-tweak-contents\"><\/div><\/div><\/div><div class=\"custom-ifram-wrapper\" style=\"display: none;\"><i class=\"fa fa-times cross\" data-id=\"36\"><\/i><div class=\"custom-ifram-flex\"><div class=\"custom-ifram\"><\/div><\/div><\/div><\/div><\/div><script>jQuery(document).ready(function() {var response = [{\"panoid\":\"pano36\"},{\"autoLoad\":true,\"showControls\":true,\"orientationSupport\":\"false\",\"compass\":false,\"orientationOnByDefault\":false,\"mouseZoom\":true,\"draggable\":true,\"disableKeyboardCtrl\":false,\"keyboardZoom\":true,\"preview\":\"\",\"default\":{\"firstScene\":\"01\",\"sceneFadeDuration\":\"\"},\"scenes\":{\"01\":{\"type\":\"equirectangular\",\"panorama\":\"https:\\\/\\\/orricoquiles.es\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/IMG_20211214_140345_00_104-scaled.jpg\",\"pitch\":null,\"yaw\":null,\"hfov\":100,\"maxHfov\":120,\"minHfov\":50,\"vaov\":180,\"haov\":360,\"hotSpots\":[]}}}];var scenes = response[1];if(scenes) {var scenedata = scenes.scenes;for(var i in scenedata) {var scenehotspot = scenedata[i].hotSpots;for(var i = 0; i < scenehotspot.length; i++) {if(scenehotspot[i][\"clickHandlerArgs\"] != \"\") {scenehotspot[i][\"clickHandlerFunc\"] = wpvrhotspot;}if(scenehotspot[i][\"createTooltipArgs\"] != \"\") {scenehotspot[i][\"createTooltipFunc\"] = wpvrtooltip;}}}}var panoshow36 = pannellum.viewer(response[0][\"panoid\"], scenes);var response_duplicate = [{\"panoid\":\"pano36\"},{\"autoLoad\":true,\"showControls\":true,\"orientationSupport\":\"false\",\"compass\":false,\"orientationOnByDefault\":false,\"mouseZoom\":true,\"draggable\":true,\"disableKeyboardCtrl\":false,\"keyboardZoom\":true,\"preview\":\"\",\"default\":{\"firstScene\":\"01\",\"sceneFadeDuration\":\"\"},\"scenes\":{\"01\":{\"type\":\"equirectangular\",\"panorama\":\"https:\\\/\\\/orricoquiles.es\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/IMG_20211214_140345_00_104-scaled.jpg\",\"pitch\":null,\"yaw\":null,\"hfov\":100,\"maxHfov\":120,\"minHfov\":50,\"vaov\":180,\"haov\":360,\"hotSpots\":[]}},\"autoRotate\":false}];var scenes_duplicate = response_duplicate[1];if(scenes_duplicate) {var scenedata = scenes_duplicate.scenes;for(var i in scenedata) {var scenehotspot = scenedata[i].hotSpots;for(var i = 0; i < scenehotspot.length; i++) {if(scenehotspot[i][\"clickHandlerArgs\"] != \"\") {scenehotspot[i][\"clickHandlerFunc\"] = wpvrhotspot;}if(scenehotspot[i][\"createTooltipArgs\"] != \"\") {scenehotspot[i][\"createTooltipFunc\"] = wpvrtooltip;}}}}jQuery(\".wpvr-floor-map .floor-plan-pointer\").on(\"click\",function(){\n           var scene_id = jQuery(this).attr(\"scene_id\");\n           panoshow36.loadScene(scene_id)\n           jQuery(\".floor-plan-pointer\").removeClass(\"add-pulse\")\n           jQuery(this).addClass(\"add-pulse\")\n           \n        });\n        const node = document.querySelector(\".add-pulse\");\n        panoshow36.on(\"compasschange\", function (data){\n            console.log(data);\n            \/\/ const node = document.querySelector(\".add-pulse\");\n            \/\/ node.style.transform = data;\n            \/\/ jQuery(\".add-pulse\").css({\"transform\":data});\n    \n            });\n        panoshow36.on(\"load\", function (){\n            if(localStorage.getItem(\"vr_mode\") == \"off\") {\n                  jQuery(\".vr-mode-title\").hide();\n                }\n             else {\n                jQuery(\"#pano236 .pnlm-compass.pnlm-controls.pnlm-control\").css(\"display\",\"none\");\n                jQuery(\"#pano36 .pnlm-compass.pnlm-controls.pnlm-control\").css(\"display\",\"none\");\n                jQuery(\"#pano236 .pnlm-panorama-info\").hide();\n                jQuery(\"#pano36 .pnlm-panorama-info\").hide();\n                jQuery(\".vr-mode-title\").show();\n             }\n            setTimeout(() => {\n                window.dispatchEvent(new Event(\"resize\"));\n            }, 200);\n\t\t\t\t\t\tif (jQuery(\"#pano36\").children().children(\".pnlm-panorama-info:visible\").length > 0) {\n\t               jQuery(\"#controls36\").css(\"bottom\", \"55px\");\n\t           }\n\t           else {\n\t             jQuery(\"#controls36\").css(\"bottom\", \"5px\");\n\t           }\n\t\t\t\t\t});panoshow36.on(\"render\", function (){\n              window.dispatchEvent(new Event(\"resize\"));\n            });\n\t\t\t\t\tif (scenes.autoRotate) {\n\t\t\t\t\t\tpanoshow36.on(\"load\", function (){\n\t\t\t\t\t\t setTimeout(function(){ panoshow36.startAutoRotate(scenes.autoRotate, 0); }, 3000);\n\t\t\t\t\t\t});\n\t\t\t\t\t\tpanoshow36.on(\"scenechange\", function (){\n\t\t\t\t\t\t setTimeout(function(){ panoshow36.startAutoRotate(scenes.autoRotate, 0); }, 3000);\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\tvar touchtime = 0;\n            jQuery(document).on(\"click\",\"#explainer_button_36\",function() {\n                jQuery(\"#explainer36\").slideToggle();\n            });\n    \n            jQuery(document).on(\"click\",\".close-explainer-video\",function() {\n                jQuery(this).parent(\".explainer\").hide();\n                var el_src = jQuery(\".vr-iframe\").attr(\"src\");\n                jQuery(\".vr-iframe\").attr(\"src\", el_src);\n              });\n    \n            \n            jQuery(document).on(\"click\",\"#floor_map_button_36\",function() {\n                jQuery(\"#wpvr-floor-map36\").toggle().removeClass(\"fullwindow\");\n              });\n        \n              jQuery(document).on(\"dblclick\",\"#wpvr-floor-map36\",function(){\n                jQuery(this).addClass(\"fullwindow\");\n                jQuery(this).parents(\".pano-wrap\").addClass(\"show-modal\");\n              });\n              \n              jQuery(document).on(\"click\",\".close-floor-map-plan\",function() {\n                jQuery(this).parent(\".wpvr-floor-map\").hide();\n                jQuery(this).parent(\".wpvr-floor-map\").removeClass(\"fullwindow\");\n                jQuery(this).parents(\".pano-wrap\").removeClass(\"show-modal\");\n              });\n        \n            \n\t\t          jQuery(document).ready(function($){\n\t\t              jQuery(\"#sccontrols36\").hide();\n                      jQuery(\".wpvr_slider_nav\").hide();\n\t\t              jQuery(\".vrgctrl36\").html('<i class=\"fa fa-angle-up\"><\/i>');\n\t\t          });\n\t\t          \n\t\t          var slide36 = \"down\";\n\t\t          jQuery(document).on(\"click\",\"#vrgcontrols36\",function() {\n\n\t\t            if (slide36 == \"up\") {\n\t\t              jQuery(\".vrgctrl36\").empty();\n\t\t              jQuery(\".vrgctrl36\").html('<i class=\"fa fa-angle-up\"><\/i>');\n\t\t              slide36 = \"down\";\n\t\t            }\n\t\t            else {\n\t\t              jQuery(\".vrgctrl36\").empty();\n\t\t              jQuery(\".vrgctrl36\").html('<i class=\"fa fa-angle-down\"><\/i>');\n\t\t              slide36 = \"up\";\n\t\t            }\n                    jQuery(\".wpvr_slider_nav\").slideToggle(); \n\t\t            jQuery(\"#sccontrols36\").slideToggle();\n\t\t          });\n\t\t          \n            jQuery(\".elementor-tab-title\").click(function(){\n                      var element_id;\n                      var pano_id;\n                      var element_id = this.id;\n                      element_id = element_id.split(\"-\");\n                      element_id = element_id[3];\n                      jQuery(\"#elementor-tab-content-\"+element_id).find(\"#master-container\").children(\"div\").eq(1).addClass(\"awwww\");\n                      var pano_id = jQuery(\".awwww\").attr(\"id\");\n                      jQuery(\"#elementor-tab-content-\"+element_id).find(\"#master-container\").children(\"div\").eq(1).removeClass(\"awwww\");;\n                      if (pano_id != undefined) {\n                        pano_id = pano_id.split(\"o\");\n                        pano_id = pano_id[1];\n                        if (pano_id == \"36\") {\n                          jQuery(\"#pano36\").children(\".pnlm-render-container\").remove();\n                          jQuery(\"#pano36\").children(\".pnlm-ui\").remove();\n                          panoshow36 = pannellum.viewer(response[0][\"panoid\"], scenes);\n                          jQuery(\"#pano36\").children(\".pnlm-ui\").find(\".pnlm-load-button p\").text(\"Click To Load Panorama\")\n                          setTimeout(function() {\n                                \/\/   panoshow36.loadScene(\"01\");\n                                  window.dispatchEvent(new Event(\"resize\"));\n                                  if (jQuery(\"#pano36\").children().children(\".pnlm-panorama-info:visible\").length > 0) {\n                                       jQuery(\"#controls36\").css(\"bottom\", \"55px\");\n                                   }\n                                   else {\n                                     jQuery(\"#controls36\").css(\"bottom\", \"5px\");\n                                   }\n                                   \n                          }, 200);\n                        }\n                      }\n            });\n        \n            jQuery(\".geodir-tab-head dd, #vr-tour-tab\").click(function(){\n              jQuery(\"#pano36\").children(\".pnlm-render-container\").remove();\n              jQuery(\"#pano36\").children(\".pnlm-ui\").remove();\n              panoshow36 = pannellum.viewer(response[0][\"panoid\"], scenes);\n              setTimeout(function() {\n                      panoshow36.loadScene(\"01\");\n                      window.dispatchEvent(new Event(\"resize\"));\n                      if (jQuery(\"#pano36\").children().children(\".pnlm-panorama-info:visible\").length > 0) {\n                           jQuery(\"#controls36\").css(\"bottom\", \"55px\");\n                       }\n                       else {\n                         jQuery(\"#controls36\").css(\"bottom\", \"5px\");\n                       }\n              }, 200);\n            });\n        \n            jQuery(\"#pano36\").children(\".pnlm-ui\").find(\".pnlm-load-button p\").text(\"Click To Load Panorama\")\n            });<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Example [vr url=path-to-photo.jpg view=360]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-59","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/orricoquiles.es\/index.php\/wp-json\/wp\/v2\/posts\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orricoquiles.es\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orricoquiles.es\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orricoquiles.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orricoquiles.es\/index.php\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":7,"href":"https:\/\/orricoquiles.es\/index.php\/wp-json\/wp\/v2\/posts\/59\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/orricoquiles.es\/index.php\/wp-json\/wp\/v2\/posts\/59\/revisions\/67"}],"wp:attachment":[{"href":"https:\/\/orricoquiles.es\/index.php\/wp-json\/wp\/v2\/media?parent=59"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orricoquiles.es\/index.php\/wp-json\/wp\/v2\/categories?post=59"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orricoquiles.es\/index.php\/wp-json\/wp\/v2\/tags?post=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}