[摘要krpano1.2升级后，推出了一个popup弹窗插件，该插件结合力1.2版本的模糊效果，是一个能直接使用且美观的弹窗,对比1.19版本的iframe代码有较大优化，我们不需要再使用第三方弹窗应用于全景内了，尤其是网页弹窗适配了移动端的支持，支持在移动设备下弹出网页通过滚动条显示，同时您也可以用该弹窗直接显示html标签、弹出在线视频、显示图片等，效果如下：
插件代码
|
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 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<!--插入krpano1.2模糊插件--> <plugin name="pp_blur" keep="true" url="%VIEWER%/plugins/pp_blur.js" enabled="true" range="0.0" linearrgb="false" order="1" phase="2" /> <!--popup弹窗动作参数说明： type=弹窗窗口类型：image、iframe、html, content=图片路径、网址、html的data数据， width=弹窗宽度， height=弹窗高度， scrollbars=是否显示滚动条 --> <action name="popup" scope="private:POPUP" args="type, content, width, height, scrollbars"><![CDATA[ if(popup, break(); ); addlayer('popup', popup); set(popup, type=container, width=calc(min(width,global.stagewidth*0.9)), height=calc(min(height,global.stageheight*0.8)), align=center, bgborder='1 0x555555 1', bgcolor=0x555555, bgalpha=0.7, bgshadow='0 10 20 0x000000 0.5', bgcapture=true, maskchildren=true, capture=true, handcursor=false, alpha=0 ); if(type == 'html', copy(popup.datacontent, content); calc(popup.onloaded, 'add_html_code(get(datacontent),'+scrollbars+');'); ,type == 'iframe', calc(popup.datacontent, '<iframe style="position:absolute;width:100%;height:100%;top:0px;left:0px;" src="'+content+'" frameborder="0" allowfullscreen></iframe>'); calc(popup.onloaded, 'add_html_code(get(datacontent),'+scrollbars+');'); ,type == 'image', set(popup, bgcolor=0xFFFFFF, bgalpha=1, ); addlayer("popup_image", img); set(img, url=get(content), align=center, width=-20, height=-20, parent=get(popup.name), onloaded='popup_imageloaded()' ); ); tween(global.plugin[pp_blur].range, 40.0); delayedcall(0.2, tween(global.layer[popup].alpha, 1.0); ); set(global.events[popup].onclick, set(global.events[popup].name, null); tween(global.plugin[pp_blur].range, 0.0); tween(global.layer[popup].alpha, 0.0, 0.25, default, removelayer('popup', true); scope(private:POPUP, delete(popup); ); ); ); ]]></action> <action name="popup_imageloaded" scope="private:POPUP"> calc(imgw, caller.imagewidth + 20); calc(imgh, caller.imageheight + 20); calc(maxw, global.stagewidth*0.9); calc(maxh, global.stageheight*0.8); if(imgw GT maxw, calc(imgh, round(imgh * maxw / imgw)); copy(imgw, maxw); ); if(imgh GT maxh, calc(imgw, round(imgw * maxh / imgh)); copy(imgh, maxh); ); set(global.layer[get(caller.parent)], width=get(imgw), height=get(imgh) ); </action> <action name="circlepos" scope="localonly" args="pos, total"> calc(caller.ox, -100 * cos((pos-1)/total * Math.PI * 2.0) ); calc(caller.oy, -100 * sin((pos-1)/total * Math.PI * 2.0) ); </action> <!-- arguments: 1=htmlcode, 2=scrollbars --> <action name="add_html_code" type="Javascript"><![CDATA[ var div = document.createElement("div"); // basic styles to fit into the layer size and allow scrolling: div.style.width = "100%"; div.style.height = "100%"; div.style.boxSizing = "border-box"; div.style.overflow = args[2] == "true" ? "auto" : "hidden"; // allow text selection (optional): div.style.webkitUserSelect = div.style.MozUserSelect = div.style.msUserSelect = div.style.userSelect = "text"; function stopPropagation(e){ e.stopPropagation(); } function preventDefault(e){ e.preventDefault(); } // enable browsed-based mouse-wheel and touch-scrolling support: div.addEventListener("wheel", stopPropagation, true); div.addEventListener("mousewheel", stopPropagation, true); div.addEventListener("DOMMouseScroll", stopPropagation, true); div.addEventListener("touchstart", function(event){ if(krpano.device.ios && window.innerHeight == krpano.display.htmltarget.offsetHeight){ /* avoid the iOS 'overscrolling' for fullpage viewers */ var bs = document.body.parentNode.style; bs.position="fixed"; bs.top=0; bs.left=0; bs.right=0; bs.bottom=0; } krpano.control.preventTouchEvents = false; event.stopPropagation(); }, true); div.addEventListener("touchend", function(event){ krpano.control.preventTouchEvents = true; event.stopPropagation(); }, true); div.addEventListener("gesturestart", preventDefault, true); // add the html code: div.innerHTML = args[1]; // add the div to the layer element: caller.sprite.appendChild(div); ]]></action> |
调用方法
|
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 |
<hotspot name="spot1" style="infospot" html="HTML标签" ath="0" atv="0" onloaded="circlepos(1,6);" onclick="popup('html', get(data[data_html_example].content), 600, 300, true);" /> <hotspot name="spot2" style="infospot" html="Web网页" ath="0" atv="0" onloaded="circlepos(2,6);" onclick="popup('iframe', 'http://victu360.com/', 800, 600, true);" /> <hotspot name="spot3" style="infospot" html="全景漫游" ath="0" atv="0" onloaded="circlepos(3,6);" onclick="popup('iframe', 'https://victu360.com/panos/demo', 800, 600, false);" /> <hotspot name="spot4" style="infospot" html="在线视频" ath="0" atv="0" onloaded="circlepos(4,6);" onclick="popup('iframe', 'http://player.youku.com/embed/XNDQ4NjA4NjM3Ng==', 900, 506, false);" /> <hotspot name="spot5" style="infospot" html="图片二" ath="0" atv="0" onloaded="circlepos(5,6);" onclick="popup('image', '%CURRENTXML%/garden_f.jpg');" /> <hotspot name="spot6" style="infospot" html="图片一" ath="0" atv="0" onloaded="circlepos(6,6);" onclick="popup('image', '%CURRENTXML%/garden_l.jpg');" /> |
做弹窗正适合，升级还是好处不少