热点图文插件

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

简述

最新版本为 2016.10.24  ver 1.26  购买者可咨询作者获取最新版本

本插件可在krpano项目中生成弹出图文样式,或者嵌入外部html网页。

横版(电脑、平板、手机自适应):

QQ图片20151211103828

 

竖版(电脑、平板、手机自适应):

QQ图片20151211103906

 

超高分辨率图片查看(嵌入外部页面)

 

多层环物查看(嵌入外部页面)

该插件应用简单,用户只需要调用open_textbox(0);,即可以自动弹出图文或者html页面。

图文的标题、文字内容、图片地址可自定义。

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

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

 

演示

两个场景均含有热点图文,第一个场景是普通热点弹出,以横幅图片为主,第二个场景是多边形热区弹出图文,以竖幅图片为主。(演示版本为旧版本)

点击此处全屏查看

微信扫一扫二维码在手机上观看

qr

 

功能简介

  • 可添加图文热点,可选择同时显示图文,或者只显示图片或文字。或选择嵌入外部网页
  • 用户可为每个图文添加音频、添加超链接
  • 用户可自定义标题、文本内容、图片路径、音频路径和超链接,图片路径可按照pc端和手机端分别适配。
  • 图片与文字的显示比例和位置可自定义。当文字较多时,可滚动查看。每一个热点的图文的显示比例均可自定义,也就是说可以A热点弹出纯图相册,而B热点弹出纯文字,C热点弹出图文混排。
  • 按钮提供psd文件,可自行设计。
  • 背景图片、颜色、透明度以及尺寸可自定义。
  • 各个按钮的位置和尺寸可自定义。
  • 图片可缩放大小以及拖拽浏览。点击右下角放大镜按钮全屏查看图片
  • 可选择是否显示上一个或下一个的按钮。
  • 用户可自定义关闭图片时执行的动作
  • 用户可设置单图文或相册多图文
  • 169元用户购买的案例包含了平面图导航插件展示(之前99元购买的用户和VIP用户购买的不含该插件)
  • 注意:用户购买的案例不含环物热点多层插件案例,用户可另行购买。
  • 最新版本 1.25

 

购买方式

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

QQ联系:178941086

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

所有购买本插件的用户后期更新均可免费获得(请及时咨询QQ 178941086 获取)。

使用方法

本插件需要配合官方插件textfield插件和scrollarea插件以及第三方插件orientation.js,请在使用前确认在plugin文件夹中已经拷贝了对应版本的textfiled插件和scrollarea插件。

  • textbox.xml以及textboxsetting.xml以及gallerybtns.png、t.png拷贝到项目根目录下。
  • 将plugins文件夹的orientation.js拷贝到plugins文件夹。
  • 在主xml文件加入以下代码:

在xml中调用 open_textbox(1);,1为当前场景要弹出图文的热点的序号,在textboxsetting.xml可以设定,即box的name后面的序号。

open_textbox(2,null,30%,30%,true,true)

第一个参数为当前场景要弹出图文的热点的序号,也就是对应的box元素的box_后面的数字

第二个参数是对应的intropic元素的name,如果写null,则表示是调用的当前scene的name所对应的intropic

第三个参数为横版的自定义的图文比例,默认为null

第四个参数为竖版的自定义的图文比例,默认为null

第五个参数是否显示箭头,默认为null,写true的话,则显示第二个参数所调用的intropic对应下全部box元素的图文,则相册功能

第六个参数是否相册循环,值是true或者false,默认为null

只有第一个参数是必须的,其它参数可选,若使用默认时写null,如果某参数后面的参数都是null,则可以不写后面的参数。

textboxsetting.xml设置

textbox_settings元素的设置说明

pic_ratio 横屏时文本部分所占的整体比例,此处填写百分比(需包含百分号%),数值小于20%时,则只显示图片,大于35%,则只显示文本

pic_ratio_portrait 与pic_ratio类似,设置的是竖屏时的文本部分占比,数值小于20%时,则只显示图片,大于35%,则只显示文本

pic_align 设置横屏时文本显示在左侧还是在右侧,可选的数值为lefttop和righttop,分别为左侧和右侧显示文本

pic_resize_min 设置图片的最小缩放比例,默认值为1,不能设置大于1或者小于0的数值。数值需要大于0或小于等于1

pic_resize_max 设置图片的最大缩放比例,默认值为1,不能设置小于1的数值。数值需要大于或等于1

linecolor 图文中间分隔线颜色,为十六进制表示方式

linealpha 图文中间分隔线透明度,数值为0到1之间

separation_line_visible 是否在横屏时显示关闭按钮与其它按钮之间的竖向分隔线,其颜色和透明度与中间分隔线保持一致,可选择true或者false

scale_normal 关闭按钮、音频按钮、外链按钮以及放大镜按钮在非手机端的缩放比例 1为默认值

scale_mobile 关闭按钮、音频按钮、外链按钮以及放大镜按钮在手机端的缩放比例 0.75为默认值

scale_normal_for_next_prev 左右箭头在非手机端的缩放百分比 默认为 100 也就是百分百

scale_mobile_for_next_prev 左右箭头在手机端的缩放百分比 默认为 75 也就是百分之七十五

next_prev_x_normal 左右箭头在非手机端横屏时的水平偏移,单位为像素,向外侧偏移填负数,向内侧偏移填正数

next_prev_x_normal_portrait 左右箭头在非手机端竖屏时的水平偏移,单位为像素,向外侧偏移填负数,向内侧偏移填正数

next_prev_x_mobile 左右箭头在手机端横屏时的水平偏移,单位为像素,向外侧偏移填负数,向内侧偏移填正数

next_prev_x_mobile_portrait 左右箭头在手机端竖屏时的水平偏移,单位为像素,向外侧偏移填负数,向内侧偏移填正数

next_prev_portrait_bottom 是否在竖屏时将左右箭头放在底部,true或者false

button_postion_x 关闭按钮、音频按钮、外链按钮的水平偏移,负值时按钮向外侧偏移

button_postion_y 关闭按钮、音频按钮、外链按钮的垂直偏移,负值时按钮向上侧偏移

title_postion_y_mobile 当只有纯图时,左下角标题在手机端时的垂直位置,

title_postion_y_normal 当只有纯图时,左下角标题在非手机端时的垂直位置,

index_postion_y_mobile 当为多图文浏览时,下方序号的在手机端的垂直位置

index_postion_y_normal 当为多图文浏览时,下方序号的在非手机端的垂直位置

usebg 是否在背景中使用图片

bg_url 背景图片的路径

bg_scale9grid 背景图片的scale9grid值

bgcolor 背景颜色,十六进制 与layer元素的容器属性bgcolor一致

bgalpha 背景透明度 与layer元素的容器属性bgalpha 一致

bgborder 背景边框设置 与layer元素的容器属性bgborder一致

bgroundedge 背景圆角设置 与layer元素的容器属性bgroundedge一致

bgshadow 背景阴影设置 与layer元素的容器属性bgshadow一致

bgwidth 背景宽度比例,百分比

bgheight 背景高度比例,百分比

closebutton_color 关闭按钮是否呈现颜色

enlarge_button 是否显示放大镜按钮

next_and_prev_button 是否显示左右两个箭头按钮,显示的话则提供多图文切换的相册功能

next_and_prev_button_color 左右按钮是否在正常状态时呈现颜色,默认是白色,鼠标悬停时出现颜色

next_and_prev_button_alpha 左右按钮的透明度

next_and_prev_loop 相册是否循环

title_normal 标题字体设置

title_mobile 标题字体手机端设置

index_normal 相册序号字体设置

index_mobile 手机端的相册序号字体设置

index_color 相册当前序号的颜色

text_normal 文本字体设置

text_mobile 文本字体手机端设置

zoomtocursor 图片缩放时是否在鼠标位置进行缩放

autoplaysound 是否进入图文时自动播放音频

button 可互换音频按钮和链接按钮的位置 music|link 或 link|music

linkbutton 可设置链接按钮的样式 包括 1 2 3 三个数值可选 也可以通过修改psd文件选择自己的样式

loadingtext 图片加载时的加载文字

loadingtextcss 加载文字的样式设定

loadingimgurl 图片加载时的加载动画png 若需要使用png 则 loadingtext 为空

loadingimgvalue 与动态热点的参数一致,三个参数分别是每一帧的宽度高度和帧速率,中间用|隔开

imgurl 皮肤图片路径,目前提供了五个图片可选,也可以通过修改psd文件选择自己的样式

 

以下设置保持默认,直接复制案例的即可
change_pic_ratio

change_pic_ratio_portrait

change_next_and_prev_loop

change_next_and_prev_button

change_pic_bg

skintextbox

iframe

bfl

 

intropic元素的设置说明

intropic的name对应的是scene标签的name。

当intropic的name为非scene的name时,调用open_textbox时需要在第二个参数中指明这个intropic的name

box的name的命名要从box_0开始,而且必须是box_开头,下划线后的数字就是图文的序号,box_0的数字0与open_textbox(0)中的第一个参数数字0对应。也就是说只能按照这个规律命名。

下面是box元素的属性说明:

title是标题。如果是纯图时,标题会显示在左下角

text的数值要与data元素的name数值对应上。

imgurl为图片路径,可选择体积较大的图片,该图片在非手机端使用

simgurl为手机端图片的路径,可选择较小体积的图片地址

sound为音频文件路径

link为链接按钮的链接,只支持http链接

html为图片框中加载的外部html页面。如果使用html设置,必须使用 imgurl=”t.png” simgurl=”t.png”

pic_ratio是横屏时的图文比例,如果没有设置则沿用textboxsettings的设置

pic_ratio_portrait是竖屏时的图文比例,如果没有设置则沿用textbox_settings的设置

 

 

使用秘技

使用背景图片

未命名_副本

使用背景图片作为弹出的背景图片,非常适合制作个性化全景的需求,配合自定义的按钮样式和位置设定,可使得弹出的图文呈现出不同的变化。首先我们要准备一张jpg或者png(如果有透明度的需要),图片体积在满足视觉效果的前提下尽量小。制作图片时考虑有边框和无边框的情况来选择填入bg_scale9grid的数值。

以后数值需要注意。

usebg 是否在背景中使用图片 这里要用true

bg_url 背景图片的路径

bg_scale9grid 背景图片的scale9grid值 scale9grid可以保证边框的部分不因为容器的尺寸变化而被拉伸

bgalpha 使用背景图片的情况下设置为0

bgshadow 背景阴影设置 需要设置为0

bgwidth 背景宽度比例,为了呈现出效果, 可以选择较小的百分比

bgheight 背景高度比例,为了呈现出效果,可以选择较小的百分比

此外也可以把几个按钮和箭头挪到容器外。

 

使用多图相册功能

多图和单图相册的区别在于前者拥有箭头和索引号,下面第一张图为单图,第二张图为相册。QQ图片20161006163321_副本

QQ图片20161006163306_副本

首先要在intropic元素中安排好图文顺序,按照box的name进行排序。

然后使用open_textbox(2,null,30%,30%,true,true)的第五个和第六个参数。第五个为true时即使用相册功能,第六个为true时相册会循环。

 

设置加载中样式

加载中样式指的是当图片体积较大,还在缓存时出现在相应区域的加载提示,本插件提供了文字提示和图片提示两种样式。

loadingtext 图片加载时的加载文字

loadingtextcss 加载文字的css样式设定

loadingimgurl 图片加载时的加载动画png 若需要使用png 则 loadingtext 要为空

loadingimgvalue 与动态热点的参数一致,三个参数分别是每一帧的宽度高度和帧速率,中间用 | 隔开

目前提供了三种样式的加载图。其参数分别为

loadingimgurl=”loadanimation.png”
loadingimgvalue=”64|64|4″

loadingimgurl=”loadanimation2.png”
loadingimgvalue=”100|100|4″

loadingimgurl=”loadanimation3.png”
loadingimgvalue=”80|80|4″

QQ图片20161006080232

设置按钮样式

imgurl 皮肤图片路径,目前提供了五个图片可选,也可以通过修改psd文件选择自己的样式

未标题-1

 

……