{"id":6467,"date":"2023-04-26T16:18:11","date_gmt":"2023-04-26T21:18:11","guid":{"rendered":"https:\/\/www.kasdorf.name\/wordpress\/?p=6467"},"modified":"2023-04-26T16:49:00","modified_gmt":"2023-04-26T21:49:00","slug":"ipanorama-using-banners-for-information","status":"publish","type":"post","link":"https:\/\/www.kasdorf.name\/wordpress\/2023\/04\/26\/ipanorama-using-banners-for-information\/","title":{"rendered":"iPanorama &#8211; Using Banners for Information."},"content":{"rendered":"<div class=\"pps-series-post-details pps-series-post-details-variant-classic pps-series-post-details-6867\" data-series-id=\"242\"><div class=\"pps-series-meta-content\"><div class=\"pps-series-meta-text\">This entry is part 8 of 10 in the series <a href=\"https:\/\/www.kasdorf.name\/wordpress\/series\/ipanorama\/\">iPanorama<\/a><\/div><\/div><\/div>\n<p>Adding a &#8220;Banner&#8221; to an iPanorama 360\u00b0 may be useful for adding static information. It does not move when the actual image is panned.<\/p>\n\n\n<p><iframe loading=\"lazy\" width=\"760\" height=\"560\" src=\"https:\/\/www.kasdorf.name\/wordpress\/ipanorama\/virtualtour\/17\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n\n\n\n<p>Adding this code will create a banner. The settings can be tweaked to suit specific types of information, colors, etc.<\/p>\n\n\n\n<p>Add the following to the &#8220;Custom CSS&#8221; field.<\/p>\n\n\n<p>\/* Start of Banner Custom CSS Code *\/<br \/>.ipnrm-scene-banner {<br \/>transition: all 0.5s;<br \/>transform: translate(0,-100%);<br \/>position: absolute;<br \/>top: 0;<br \/>left: 0;<br \/>right: 0;<br \/>padding: 15px 20px;<br \/>background: #808080;<br \/>}<br \/>.ipnrm-scene-banner.active {<br \/>transform: translate(0,0);<br \/>}<\/p>\n<p>.ipnrm-scene-banner .title {<br \/>color: #FFFFFF;<br \/>line-height: 20px;<br \/>font-size: 18px;<br \/>font-family: arial;<br \/>font-weight: 600;<br \/>margin: 5px 0;<br \/>}<\/p>\n<p>.ipnrm-scene-banner .altitude {<br \/>color: #FFFFFF;<br \/>\/*text-align: right;*\/<br \/>line-height: 20px;<br \/>font-size: 17px;<br \/>font-family: arial;<br \/>font-weight: 400;<br \/>margin: 5px 0;<br \/>}<\/p>\n<p>.ipnrm-scene-banner .description {<br \/>color: #FFFFFF;<br \/>\/*text-align: center;*\/<br \/>line-height: 20px;<br \/>font-size: 16px;<br \/>font-family: arial;<br \/>font-weight: 200;<br \/>margin: 5px 0;<br \/>}<br \/>\/* End of CSS banner code*\/<\/p>\n\n<p><strong>Add the following into the &#8220;Custom JS&#8221; field.<\/strong><\/p>\n\n<p>\/* Start of Banner Custom JS Code *\/<br \/>var instance = this,<br \/>$ = jQuery;<br \/>var $banner = $(&#8216;&lt;div&gt;&#8217;).addClass(&#8216;ipnrm-scene-banner&#8217;);<br \/>instance.$container.append($banner);<br \/>instance.$container.on(&#8216;ipanorama:scene-before-load&#8217;, function(e, data) {<br \/>$banner.removeClass(&#8216;active&#8217;);<br \/>});<br \/>instance.$container.on(&#8216;ipanorama:scene-after-load&#8217;, function(e, data) {<br \/>var scene = data.scene;<br \/>if(!scene) return;<br \/>$banner.empty();<br \/>if(scene.cfg.userData) {<br \/>try {<br \/>var data = JSON.parse(scene.cfg.userData); <br \/>data.title &amp;&amp; $(&#8216;&lt;div&gt;&#8217;).append(data.title).addClass(&#8216;title&#8217;).appendTo($banner);<br \/>data.altitude &amp;&amp; $(&#8216;&lt;div&gt;&#8217;).append(data.altitude).addClass(&#8216;altitude&#8217;).appendTo($banner);<br \/>data.description &amp;&amp; $(&#8216;&lt;div&gt;&#8217;).append(data.description).addClass(&#8216;description&#8217;).appendTo($banner);<br \/>$banner.addClass(&#8216;active&#8217;);<br \/>} catch(ex) {}<br \/>}<br \/>});<\/p>\n<p>\/* End of JS banner code*\/<\/p>","protected":false},"excerpt":{"rendered":"<div class=\"pps-series-post-details pps-series-post-details-variant-classic pps-series-post-details-6867 pps-series-meta-excerpt\" data-series-id=\"242\"><div class=\"pps-series-meta-content\"><div class=\"pps-series-meta-text\">This entry is part 8 of 10 in the series <a href=\"https:\/\/www.kasdorf.name\/wordpress\/series\/ipanorama\/\">iPanorama<\/a><\/div><\/div><\/div><p>Adding a &#8220;Banner&#8221; to an iPanorama 360\u00b0 may be useful for adding static information. It does not move when the actual image is panned. Adding this code will create a banner. The settings can be tweaked to suit specific types of information, colors, etc. Add the following to the &#8220;Custom CSS&#8221; field. \/* Start of [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[239,9],"tags":[],"series":[242],"class_list":["post-6467","post","type-post","status-publish","format-standard","hentry","category-ipanorama","category-wordpress-playground","series-ipanorama"],"_links":{"self":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/posts\/6467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/comments?post=6467"}],"version-history":[{"count":0,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/posts\/6467\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/media?parent=6467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/categories?post=6467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/tags?post=6467"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.kasdorf.name\/wordpress\/wp-json\/wp\/v2\/series?post=6467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}