文章目录

Swipe gallery

简介

screenshot

演示

语法 / XML使用方法

将img文件夹复制到根目录下

将swipe_gallery.xml复制到plugins文件夹中

嵌入下面代码（例如两个相册）

<include url="plugins/swipe_gallery.xml" />

<!-- 事件 -->

<events onresize="make_gallery(get(activeGallery)); for(set(i,1), i LE gallery.count, inc(i), init_start_img(get(i));); update_img_number(0,get(activeGallery_id));"
      onxmlcomplete="for(set(i,1), i LE gallery.count, inc(i), init_start_img(get(i));  );" />

<!-- 图层 -->

<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,get(activeGallery_id))" url="img/arrow_left_b.png"  />
	<layer name="arrow_right" align="right" x="10" keep="true" visible="false" zorder="2" onclick="move_image(right,get(activeGallery_id))" url="img/arrow_right_b.png" />
	<layer name="gallery_close" align="righttop" x="10" y="10" keep="true" zorder="2" onclick="hide_gallery()" url="img/close_b.png" />
<layer name="img_number" url="%SWFPATH%/plugins/textfield.swf" align="bottomright" x="5" y="5" keep="true" zorder="4" enabled="false" html="/" background="false" border="false"
        css.desktop="color:#FFFFFF; font-family:Arial; text-align:right; font-style:bold; font-size:20px;"
        css.mobile="color:#FFFFFF; font-family:Arial; text-align:right; font-style:bold; font-size:14px;"
        txtshadow="1 1 3 #000000 0.8" />
</layer>
        <!-- 更改css属性来设置图像序号文本样式  -->


<!-- 更改下述样式来设置图像标题文本样式 -->
<style  name="image_title"
  background="false" border="false"
  css.desktop="color:#FFFFFF; font-family:Arial; text-align:center; font-style:normal; font-size:18px;"   
  css.mobile="color:#FFFFFF; font-family:Arial; text-align:center; font-style:normal; font-size:13px;"
  txtshadow="1 1 3 #000000 0.8"
		/>


<!-- 相册数据 border1为第一个边框 border2为第二个边框 mode为滑动方向 bgcolor为背景颜色-->

                      <!-- gallery的name必须是'galleryX'的形式 , X 是一个数字.
                           image的name必须是'imgX'的形式 , X 是一个递增的数字. -->  
                            
<gallery name="gallery1" mode="horizontal" bgcolor="0x000000" border1_size="1" border1_color="0x00000" border2_size="40" border2_color="0xFFFFFF" 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" mode="vertical" bgcolor="0xFFFFFF" border1_size="40" border1_color="0xcccccc" border2_size="3" border2_color="0xff9900" 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>

<events onresize="make_gallery(get(activeGallery)); for(set(i,1), i LE gallery.count, inc(i), init_start_img(get(i));); update_img_number(0,get(activeGallery_id));"

onxmlcomplete="for(set(i,1), i LE gallery.count, inc(i), init_start_img(get(i)); );" />

</layer>

<layer name="img_number" url="%SWFPATH%/plugins/textfield.swf" align="bottomright" x="5" y="5" keep="true" zorder="4" enabled="false" html="/" background="false" border="false"

css.desktop="color:#FFFFFF; font-family:Arial; text-align:right; font-style:bold; font-size:20px;"

css.mobile="color:#FFFFFF; font-family:Arial; text-align:right; font-style:bold; font-size:14px;"

txtshadow="1 1 3 #000000 0.8" />

</layer>

background="false" border="false"

css.desktop="color:#FFFFFF; font-family:Arial; text-align:center; font-style:normal; font-size:18px;"

css.mobile="color:#FFFFFF; font-family:Arial; text-align:center; font-style:normal; font-size:13px;"

txtshadow="1 1 3 #000000 0.8"

<!-- gallery的name必须是'galleryX'的形式 , X 是一个数字.

image的name必须是'imgX'的形式 , X 是一个递增的数字. -->

</gallery>

</gallery>

如何显示相册

通过执行 show_gallery(gallery_name)来显示相册，这里只需要将热点的style设置为hs_gallery，并将galleryname映射为对应的gallery元素的name。

<!-- hotspots -->

<hotspot name="hs1" style="hs_gallery" ath="0" atv="0" galleryname="gallery1" />
<hotspot name="hs2" style="hs_gallery" ath="50" atv="20" galleryname="gallery2" />

<!-- styles -->

<style  name="hs_gallery"
		url="img/hs_gallery.png"
		onclick="set(total_img, get(gallery[get(galleryname)].img.count)); show_gallery(get(galleryname)); update_img_number(0,get(activeGallery_id));"
		onhover="showtext(get(gallery[get(galleryname)].title))"
		/>

url="img/hs_gallery.png"

onclick="set(total_img, get(gallery[get(galleryname)].img.count)); show_gallery(get(galleryname)); update_img_number(0,get(activeGallery_id));"

onhover="showtext(get(gallery[get(galleryname)].title))"

在移动设备上改变方向

我们建议使用下面代码来改变相册显示方向。

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

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

下载

链接：https://pan.baidu.com/s/1eTaaMhO 密码：gwy1