官方下载包路径
你电脑的路径\krpano-1.20.9\viewer\examples\image-gallery\
提示:如果不了解何谓下载包路径,请查看 循序渐进(3)- krpano下载包的使用说明
在线演示
使用方法(每个场景的相册不一样)
- 将案例中的thumbbar.xml复制到项目根目录下
- 在主xml中scene元素的外嵌入
1<include url="thumbbar.xml" /> - 在scene元素外加入action代码create_thumbbar_pre。
1234567891011121314151617181920212223<action name="create_thumbbar_pre" ><!--语法说明:create_thumbbar(numberofimages, align, orientation, x,y, width,height, border);numberofimages ... 图像数量,可不用改align ... 缩略图的位置 (lefttop,left,leftright,top,center,bottom,righttop,right,bottom)orientation ... 缩略图栏的方向 (h 或 v)x,y ... 偏移的数值width,height ... 缩略图尺寸border ... 图像边框设置移动端使用小图 (calc() 针对 device.mobile 进行检查)-->create_thumbbar(get(img[%1].imgurl.count), bottom, h, 0,10, calc(device.mobile ? 45 : 90), calc(device.mobile ? 30 : 60), calc(device.mobile ? 3 : 6));for(set(i,0),i LT img[%1].imgurl.count,inc(i),thumbbar_addimage(get(img[%1].imgurl[get(i)].pos)););</action> - 在需要调用相册的scene元素的onstart属性中写上
1create_thumbbar_pre(canaldemure5) - 每个相册的基本自定义代码格式为
12345678910<img name="canaldemure5"><imgurl name="i1" pos="images/IMG_1683.jpg"/><imgurl name="i2" pos="images/IMG_1685.jpg"/><imgurl name="i3" pos="images/IMG_1688.jpg"/><imgurl name="i4" pos="images/IMG_1696.jpg"/><imgurl name="i5" pos="images/IMG_1702.jpg"/><imgurl name="i6" pos="images/IMG_1704.jpg"/></img> - 如果需要显示或隐藏某个相册。
1thumbbar_set_visible(true);
1thumbbar_set_visible(false); - 另外提供一个可删除相册的动作。
12345678910<action name="delete_thumbbar_pre">removelayer(thumbbar);for(set(i,0),i LT 100,inc(i),txtadd(dname, 'thumbbar_image_', get(i));removeplugin(get(dname)););</action>
使用方法(整个漫游都使用一个相册)
- 将案例中的thumbbar.xml复制到项目根目录下,打开thumbbar.xml,找到50行
1addplugin(thumbbar);
12addplugin(thumbbar);set(plugin[thumbbar].keep, true);
1addplugin(get(pname));
12addplugin(get(pname));set(plugin[get(pname)].keep, true); - 在主xml中scene元素的外嵌入
1<include url="thumbbar.xml" /> - 在scene元素外加入action代码create_thumbbar_pre。
1234567891011121314151617181920212223<action name="create_thumbbar_pre" onstart="autorun"><!--语法说明:create_thumbbar(numberofimages, align, orientation, x,y, width,height, border);numberofimages ... 图像数量,可不用改align ... 缩略图的位置 (lefttop,left,leftright,top,center,bottom,righttop,right,bottom)orientation ... 缩略图栏的方向 (h 或 v)x,y ... 偏移的数值width,height ... 缩略图尺寸border ... 图像边框设置移动端使用小图 (calc() 针对 device.mobile 进行检查)-->create_thumbbar(get(img[%1].imgurl.count), bottom, h, 0,10, calc(device.mobile ? 45 : 90), calc(device.mobile ? 30 : 60), calc(device.mobile ? 3 : 6));for(set(i,0),i LT img[%1].imgurl.count,inc(i),thumbbar_addimage(get(img[%1].imgurl[get(i)].pos)););</action> - 在某个自启动的action中写上create_thumbbar_pre(canaldemure5),如下面的第五行
123456<action name="startup" autorun="onstart">if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[4].name); );loadscene(get(startscene), null, MERGE);if(startactions !== null, startactions() );create_thumbbar_pre(canaldemure5)</action> - 每个相册的基本自定义代码格式为
12345678910<img name="canaldemure5"><imgurl name="i1" pos="images/IMG_1683.jpg"/><imgurl name="i2" pos="images/IMG_1685.jpg"/><imgurl name="i3" pos="images/IMG_1688.jpg"/><imgurl name="i4" pos="images/IMG_1696.jpg"/><imgurl name="i5" pos="images/IMG_1702.jpg"/><imgurl name="i6" pos="images/IMG_1704.jpg"/></img> - 如果需要显示或隐藏某个相册。
1thumbbar_set_visible(true);
1thumbbar_set_visible(false); - 另外提供一个可删除相册的动作。
12345678910<action name="delete_thumbbar_pre">removelayer(thumbbar);for(set(i,0),i LT 100,inc(i),txtadd(dname, 'thumbbar_image_', get(i));removeplugin(get(dname)););</action>