Swipe gallery--支持移动端相册--krpano插件

尼克迪亚斯 2016-8-31 krpano学院 0 喜欢 (1)

插件描述

这是一个基于xml代码开发的一个相册,同时支持电脑和移动设备拨动观看.

使用方法

插入xml插件
<include url="plugins/swipe_gallery.xml" />

<!-- 插入相册代码 -->
		
<layer name="gallery" type="container" align="center" width="100%" height="100%" alpha="0" autoalpha="true" bgcolor="0x000000" bgalpha="0.8" keep="true">
	<layer name="gallery_scrollarea" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" keep="true" align="left" width="0" height="100%" zorder="1" direction="h" ondown="set(gallery_scrollarea_start_pos, get(x))">
	</layer>
	<layer name="arrow_left"  align="left"  x="10" keep="true" visible="false" zorder="2" onclick="move_image(left)" url="img/arrow_left.png"  />
	<layer name="arrow_right" align="right" x="10" keep="true" visible="false" zorder="2" onclick="move_image(right)" url="img/arrow_right.png" />
	<layer name="gallery_close" align="righttop" x="10" y="10" keep="true" zorder="2" onclick="hide_gallery()" url="img/close.png" />
</layer>

<!-- 定义不同的相册 -->

<gallery name="gallery1" title="Title of gallery 1">
	<img name="img1" url="img/pic1.jpg" title="Escalator" />
	<img name="img2" url="img/pic2.jpg" title="Mask" />
	<img name="img3" url="img/pic3.jpg" title="Wallpaper" />
	<img name="img4" url="img/pic4.jpg" title="F/A-18 C Hornet" />
	<img name="img5" url="img/pic5.jpg" title="Forest" />
</gallery>

<gallery name="gallery2" title="Some other pictures">
	<img name="img1" url="img/pic6.jpg" title="A dog" />
	<img name="img2" url="img/pic7.jpg" title="My cat" />
	<img name="img3" url="img/pic8.jpg" title="Canal" />
	<img name="img4" url="img/pic9.jpg" title="Aquarium" />
	<img name="img5" url="img/pic10.jpg" title="Aquarium" />
	<img name="img6" url="img/pic11.jpg" title="Aquarium" />
</gallery>

 

相册打开方法

<hotspot name="hs1" 
         style="hs_gallery" 
         ath="0" atv="0" 
         galleryname="gallery1" 
         />
         
<style   name="hs_gallery"
         url="img/hs_gallery.png"
         onclick="show_gallery(get(galleryname))"
         onhover="showtext(get(gallery[get(galleryname)].title))"
         />

<gallery name="gallery1" title="Title of gallery 1">
         <img name="img1" url="img/pic1.jpg" title="Escalator" />
         <img name="img2" url="img/pic2.jpg" title="Mask" />
         <img name="img3" url="img/pic3.jpg" title="Wallpaper" />
</gallery>

可以定义一个热点或layer的样式,如上,然后通过galleryname属性打开对应的相册,也可以直接用show_gallery(gallery1)的动作形式直接打开,gallery1是相册name.

如果在移动设备打开时横向情况下,需要相册自适应的话,可以加入以下代码:

<events onresize="make_gallery(get(activeGallery));" >

 

样例


 
 

下载地址

微信扫码关注“域图新视界”公众号,编辑发送“移动相册”,免费下载文件。 



㊣ 以上文章内容来自用户投稿,本站只提供信息分享发布平台,其观点和说法不代表本站立场。如果上传的内容有异议,请及时通知我们处理。  

喜欢 1 发布评论
发表评论

您必须 [ 登录 ] 才能发表留言!

Top
error: Content is protected !!