【krpano插件】热点图文插件

Hotspot Details Plugin xml only plugin可运行于 Flash 以及 HTML5 支持1.18及以上

简述

本插件可在krpano中生成热点图文样式。如下图所示。

横版（电脑、平板、手机自适应）：

竖版（电脑、平板、手机自适应）：

该插件应用简单，用户只需要在热点的onclick属性加上open_textbox(1);，1为对应场景中图文热点的序号。即可以自动弹出图文。图文的标题、文字内容、图片地址可自定义。

图与文的显示比例可自定义，横版时可自定义图文位置，是图在左还是在右。竖版时默认图在上文在下。文字字数不限，可滚动浏览。图片可鼠标或触屏手势缩放与拖拽浏览。

后期支持加入更多功能。包括分享、视频、音频等。

演示

两个场景均含有热点图文，第一个场景是普通热点弹出，以横幅图片为主，第二个场景是多边形热区弹出图文，以竖幅图片为主。

点击阅读原文

长按识别图中二维码

功能简介

• 可添加图文热点，同时显示图文，或者选择只显示图或者文字。

• 文本内容可自定义，可滚动。

• 图片与文字的显示比例和位置可自定义。

• 按钮提供psd，可自行设计。背景颜色、透明度可自定义。

• 图片可缩放大小以及拖拽浏览。或者直接点击右下角全屏查看。

• 可定义是否显示上一个或下一个的按钮。

使用方法

本插件需要配合官方插件textfiled插件和scrollarea插件，请在使用前确认在plugin文件夹中已经拷贝了对应版本的textfiled插件。

将textbox.xml以及textboxsetting.xml以及gallerybtns.png拷贝到项目根目录下。

在主xml文件加入以下代码：

<include url="textbox.xml" /> <include url="textboxsetting.xml" />

在hotspot中加入onclick=”open_textbox(1);”。1为当前场景要弹出图文的热点的序号，在textboxsetting.xml可以设定。

<hotspot name="spot1" url="media_playback_start.png" scale="0.5" ath="28.266" atv="-4.462" onclick="open_textbox(1);" />

多边形热区的写法，也是onclick=”open_textbox(1);”

<hotspot name="hs1" fillcolor="0xaaaaaa" fillalpha="0.5" borderwidth="3.0" bordercolor="0xaaaaaa" borderalpha="1.0" depth="1000" polyline="false" scaleflying="true" tx="0" ty="0" tz="0" onclick="open_textbox(1);" > <point ath="-10.0762" atv="-20.46919" /> <point ath="-12.243177" atv="-0.440466" /> <point ath="5.263371" atv="-5.611649" /> <point ath="5.37371" atv="-28.206903" /> </hotspot>

热点图文的设置在textboxsetting.xml中进行。

textboxsetting.xml设置

基本设置

<krpano> <!-- textbox_settings pic_ratio="36%" --文字在横屏时所占的窗口比例，填写百分比，百分比小于15%时，则全屏显示图片，大于85%，则全屏显示文字 pic_ratio_portrait="35%" --文字在竖屏时所占据的窗口比例，填写百分比，百分比小于15%时，则全屏图片，大于85%，则全屏文字，当文字内容不足以填充设置比例时，自动降低比例，最低为15% pic_align="lefttop" --文字在左在右，另一个可选的数值为righttop linecolor="0xFFFFFF" --中间分割线颜色，十六进制 linealpha="0.9" --中间分割线透明度 bgcolor="0x000000" --背景颜色，十六进制 bgalpha="0.8" -- 背景透明度 closebutton_color="false" --关闭按钮是否在正常状态时呈现颜色 next_and_prev_button="true" --是否显示左右两个箭头按钮，显示的话则提供多个热点图文切换的相册功能 next_and_prev_button_color="false" --左右按钮是否在正常状态时呈现颜色，默认是白色，鼠标悬停时出现颜色 title_normal="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:28px;" --标题字体设置 title_mobile="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:36px;" --标题字体手机端设置 text_normal="color:#FFFFFF; font-family:Arial; font-size:16px;" --文本字体设置 text_mobile="color:#FFFFFF; font-family:Arial; font-size:26px;" --文本字体手机端设置--> <textbox_settings pic_ratio="36%" pic_ratio_portrait="35%" pic_align="lefttop" linecolor="0xFFFFFF" linealpha="0.9" bgcolor="0x000000" bgalpha="0.8" closebutton_color="false" next_and_prev_button="true" next_and_prev_button_color="false" title_normal="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:28px;" title_mobile="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:36px;" text_normal="color:#FFFFFF; font-family:Arial; font-size:16px;" text_mobile="color:#FFFFFF; font-family:Arial; font-size:26px;" /> <!-- intropic 中的name对应的是scene的name。count是该场景里共有几个要展示的热点图文。name要从box_0开始，下划线后的数字就是图文的序号，与open_textbox(0)中的数字0对应。text中的数值要与下面data的name对应上。simgurl为手机端图片，可选择较小体积的图片地址 --> <intropic name="scene_achilleion-hof-unten" id="0" count="4"> <box name="box_0" title="蒙娜丽莎" imgurl="image_b/DSC09439.jpg" simgurl="image_s/DSC09439.jpg" text="test_1"/> <box name="box_1" title="标题2" imgurl="image_b/DSC09429.jpg" simgurl="image_s/DSC09429.jpg" text="test_2"/> <box name="box_2" title="标题3" imgurl="image_b/DSC09457.jpg" simgurl="image_s/DSC09457.jpg" text="test_3"/> <box name="box_3" title="标题4" imgurl="image_b/DSC09460.jpg" simgurl="image_s/DSC09460.jpg" text="test_4"/> </intropic> <intropic name="scene_canaldemure5" id="0" count="4"> <box name="box_0" title="标题1" imgurl="image_b/DSC09428_1.jpg" simgurl="image_s/DSC09428_1.jpg" text="test_2"/> <box name="box_1" title="标题2" imgurl="image_b/DSC09443.jpg" simgurl="image_s/DSC09443.jpg" text="test_2"/> <box name="box_2" title="标题3" imgurl="image_b/DSC09449.jpg" simgurl="image_s/DSC09449.jpg" text="test_2"/> <box name="box_3" title="标题4" imgurl="image_b/DSC09453.jpg" simgurl="image_s/DSC09453.jpg" text="test_2"/> </intropic> <data name="test_1"> <p align="left"> <textformat indent="32"> 这在中国乃至世界绘画史上都是独一无二的。在五米多长的画卷里，共绘了814个各色人物，牛、骡、驴等牲畜73匹，车、轿二十多辆，大小船只二十九艘。房屋、桥梁、城楼等各有特色，体现了宋代建筑的特征。具有很高的历史价值和艺术价值。 </textformat> </p> <br /> <p align="left"> <textformat indent="32"> <br /> 作为文艺复兴时期作卓越的代表人物，他的成就和贡献是多方面的。《蒙娜丽莎》描绘了一位端庄秀美的西方妇女肖像，她面庞秀丽，形象逼真，似乎是真人的存在。坦然自信的神态流露出不可捉摸的带有神秘的微笑，呈现出一种高贵而不可侵犯的尊严。 </textformat> </p> <br /> <p align="left"> <textformat indent="32"> <br /> 汴河是北宋国家漕运枢纽，商业交通要道，从画面上可以看到人烟稠密，粮船云集，人们有在茶馆休息的，有在看相算命的，有在饭铺进餐的。还有"王家纸马店"，是扫墓卖祭品的，河里船只往来，首尾相接，或纤夫牵拉，或船夫摇橹，有的满载货物，逆流而上，有的靠岸停泊，正紧张地卸货。横跨汴河上的是一座规模宏大的木质拱桥，它结构精巧，形式优美。宛如飞虹，故名虹桥。有一只大船正待过桥。船夫们有用竹竿撑的；有用长竿钩住桥梁的；有用麻绳挽住船的；还有几人忙着放下桅杆，以便船只通过。邻船的人也在指指点点地象在大声吆喝着什么。船里船外都在为此船过桥而忙碌着。桥上的人，也伸头探脑地在为过船的紧张情景捏了一把汗。这里是名闻遐迩的虹桥码头区，车水马龙，熙熙攘攘，名副其实地是一个水陆交通的会合点。 </textformat> </p> <br /> <p align="left"> <textformat indent="32"> <br /> 以高大的城楼为中心，两边的屋宇鳞次栉比，有茶坊、酒肆、脚店、肉铺、庙宇、公廨等等。商店中有绫罗绸缎、珠宝香料、香火纸马等的专门经营，此外尚有医药门诊，大车修理、看相算命、修面整容，各行各业，应有尽有，大的商店门首还扎“彩楼欢门”，悬挂市招旗帜，招揽生意，街市行人，摩肩接踵，川流不息，有做生意的商贾，有看街景的士绅，有骑马的官吏，有叫卖的小贩，有乘座轿子的大家眷属，有身负背篓的行脚僧人，有问路的外乡游客，有听说书的街巷小儿，有酒楼中狂饮的豪门子弟，有城边行乞的残疾老人，男女老幼，士农工商，三教九流，无所不备。交通运载工具：有轿子、骆驼、牛马车、人力车，有太平车、平头车，形形色色，样样俱全。绘色绘形地展现在人们的眼前。 </textformat> </p> </data> <data name="test_2"><![CDATA[ 总有那么一些歌，让我们感伤、落泪。但其实让我们伤感的并不是歌曲本身，而是藏在回忆里的那些人。]]> </data> <data name="test_3"> <p align="left"> <textformat indent="32"> <br /> 以高大的城楼为中心，两边的屋宇鳞次栉比，有茶坊、酒肆、脚店、肉铺、庙宇、公廨等等。商店中有绫罗绸缎、珠宝香料、香火纸马等的专门经营，此外尚有医药门诊，大车修理、看相算命、修面整容，各行各业，应有尽有，大的商店门首还扎“彩楼欢门”，悬挂市招旗帜，招揽生意，街市行人，摩肩接踵，川流不息，有做生意的商贾，有看街景的士绅，有骑马的官吏，有叫卖的小贩，有乘座轿子的大家眷属，有身负背篓的行脚僧人，有问路的外乡游客，有听说书的街巷小儿，有酒楼中狂饮的豪门子弟，有城边行乞的残疾老人，男女老幼，士农工商，三教九流，无所不备。交通运载工具：有轿子、骆驼、牛马车、人力车，有太平车、平头车，形形色色，样样俱全。绘色绘形地展现在人们的眼前。 </textformat> </p> </data> <data name="test_4"> 打开IIS微软管理控制台，右键单击本地计算机名字，然后点击属性。[br/] </data> </krpano>

购买

正式价格为99人民币，其中textbox.xml是加密文件。

QQ联系：178941086

本站VIP可直接以68人民币价格购买。

所有购买本插件的用户后期更新均可免费获得。