文章目录

官方下载包路径

你电脑的路径\krpano-1.20.9\viewer\examples\image-gallery\

提示：如果不了解何谓下载包路径，请查看循序渐进（3）- krpano下载包的使用说明

在线演示

使用方法（每个场景的相册不一样）

将案例中的thumbbar.xml复制到项目根目录下
在主xml中scene元素的外嵌入

XHTML

<include url="thumbbar.xml" />

1

<include url="thumbbar.xml" />

在scene元素外加入action代码create_thumbbar_pre。

<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>

<!--

语法说明:

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属性中写上

XHTML

create_thumbbar_pre(canaldemure5)

1

create_thumbbar_pre(canaldemure5)

括号中的参数是scene元素的name。当然不一定用这个name，只要与对应img标签的name一致即可实现调用，create_thumbbar_pre是创建相册

每个相册的基本自定义代码格式为

<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>

</img>

也是写在scene元素的外部。img的name就是所调用的scene的name。

如果需要显示或隐藏某个相册。

XHTML

thumbbar_set_visible(true);

1

thumbbar_set_visible(true);

即显示相册

XHTML

thumbbar_set_visible(false);

1

thumbbar_set_visible(false);

即隐藏相册

另外提供一个可删除相册的动作。

<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>

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行

XHTML

addplugin(thumbbar);

1

addplugin(thumbbar);

替换为：

XHTML

addplugin(thumbbar); set(plugin[thumbbar].keep, true);

1
2

addplugin(thumbbar);
set(plugin[thumbbar].keep, true);

找到65行

XHTML

addplugin(get(pname));

1

addplugin(get(pname));

替换为：

XHTML

addplugin(get(pname)); set(plugin[get(pname)].keep, true);

1
2

addplugin(get(pname));
set(plugin[get(pname)].keep, true);
在主xml中scene元素的外嵌入

XHTML

<include url="thumbbar.xml" />

1

<include url="thumbbar.xml" />

在scene元素外加入action代码create_thumbbar_pre。

<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>

<!--

语法说明:

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)，如下面的第五行

<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>

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>

括号中的参数是scene元素的name。当然不一定用这个name，只要与对应img标签的name一致即可实现调用，create_thumbbar_pre是创建相册

每个相册的基本自定义代码格式为

<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>

</img>

也是写在scene元素的外部。img的name就是所调用的scene的name。

如果需要显示或隐藏某个相册。

XHTML

thumbbar_set_visible(true);

1

thumbbar_set_visible(true);

即显示相册

XHTML

thumbbar_set_visible(false);

1

thumbbar_set_visible(false);

即隐藏相册

另外提供一个可删除相册的动作。

<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>

removelayer(thumbbar);

for(set(i,0),i LT 100,inc(i),

txtadd(dname, 'thumbbar_image_', get(i));

removeplugin(get(dname));

);

</action>