演示
简介
- 最新版本 1.82
- 可在漫游中添加任意数量的带有缩略图功能的相册
- 每个相册中可添加任意数量的图片
- 不需要预先设定图片，只需要输入图片的名字和数量
- 可插入视频或者youtube视频
- 可定制背景和边框的尺寸、颜色和透明度以及更多设置
- 对于单独的相册可进行针对性的设置
- 可设置按钮
- 图片可放大缩小和拖拽，可使用鼠标滚轮进行浏览上一张或者下一张图片的功能，也可以进行幻灯片浏览
- 可以为图片设置描述
- 设置双击图片时执行的动作（如打开链接，打开文档等）
功能
1 缩略图窗口
这是一个包含图片的缩略图窗口。可按住鼠标左键或者鼠标滚轮进行浏览。左侧的滑条可显示缩略图在窗口中的位置。按住滑条上下拖动可以浏览。当鼠标悬停在缩略图上时，缩略图会放大。鼠标点击缩略图时，会打开对应的图片，然后缩略图上会出现一个已浏览的标签。当在图片浏览窗口浏览图片时，缩略图窗口中的缩略图也会发生相应的位置和颜色变化。点击窗口右侧的最小化按钮，缩略图会向左隐藏。在调用相册时，可设置是否打开或隐藏缩略图窗口。你可以在设置中打开当鼠标悬停时自动滚动的功能。
2 图片浏览窗口
该窗口可调节大小，颜色和透明度。预览窗口会自动缩放。当缩略图框被最小化时，图片窗口会移动到中心。
控制按钮：
- “浏览”照片的按钮位于窗口左侧和右侧。
- 幻灯片放映按钮位于窗口的右下角。
- 右侧底部为您正在查看的照片的序号/相册中的照片总数。左下角是照片标题。
- 左下是照片标题。签字样式可调整。
- “关闭”按钮。当你点击背景时，也可以关闭。
- 右下角的背景上为“浏览照片”按钮。
- 在右下角的背景上放大按钮“+”“ – ”。按住分别放大或缩小照片。鼠标滚轮也可以缩放图片。
- 照片可被鼠标左键拖动。
按钮图片位于文件夹”iconGL”，可使用自定义图片进行替换。
视频窗口
当把鼠标悬浮在视频上，会出现带有按钮的面板。
- 播放暂停按钮在视频窗口左下角。
- 在音量按钮旁边的按钮点击可静音。当你悬浮鼠标时，音量滑条会出现，
- 最右侧是时间线。
为相册准备图片和缩略图
对应每一个相册准备图片和缩略图，每个照片要有相同的前缀以及对应的编号（例如 – cats1.jpg，cats2.jpg …cats№.jpg），同时还要准备小尺寸的缩略图，例如存放在使他们的缩略图缩小窗口（缩小尺寸）和地点 他们在，例如，文件夹“m”。
照片只能是jpg格式。
在设置中只需要输入照片的名称和数量，照片数量和序号将自动添加到名字中。 缩略图的照片会自动调整宽度和高度。
使用方法
将Gallery_photoSM文件夹放在项目根目录下。
在主xml中放入下面高亮代码：
|
1 2 3 4 5 6 |
<krpano .... > <include url="Gallery_photoSM/Gallery_M.xml" /> . . </krpano> |
在需要调用相册的位置设置事件。参数为相册自定义元素的名字，例如这里用的是cats，则在Setting_galereya.xml有cats元素。
|
1 |
onclick="Galereya(cats);" |
如需要默认设置，只需要指定下面的就可以了，例如12张照片 – cats1.jpg,cats2.jpg…cats12.jpg
- 图片的路径 (%HTMLPATH%/photo/cats)
- 缩略图的路径 (%HTMLPATH%/photo/m/cats)
- 图片数量(12)
在Setting_galereya.xml中写
|
1 2 3 4 |
<cats photo="%HTMLPATH%/photo/cats" miniature_photo="%HTMLPATH%/photo/m/cats" number_thumbnails="12" /> |
也可以进行自定义设置
|
1 2 3 4 5 6 |
<Thailand photo="%HTMLPATH%/photo/IMG_" miniature_photo="%HTMLPATH%/photo/m/IMG_" number_thumbnails="8" thumbbar_width="150" thumbbar_height="100%" /> |
注意！
如果你在漫游中使用了onmousewheel事件，那么你需要同时写上listaty_Wheel();
例如
|
1 |
<events onmousewheel="你自己的action();m_wheelSM();" /> |
同时要在Gallery_M2.xml移除下面代码
|
1 |
<events onmousewheel="m_wheelSM();"/> |
Gallery_M2.xml是开源代码，可以自行设计按钮。
设置
在Setting_galereya.xml对应Galereya(Set_1)中参数的自定义元素。
不要用逗号取代句号。
-
- photo=”%HTMLPATH%/photo/cats “
图片的路径与文件名前缀，例如 %HTMLPATH%/photo/cats，则对应photo文件夹下必须要有(cats1,cats2…cats加数字这样的图片) - miniature_photo=”%HTMLPATH%/photo/mini/cats “
缩略图的路径与文件名前缀 - photo_height =”90%”
图片相当窗口的高度百分比 - number_thumbnails=”10”
相册的图片数量 - step_miniature=”5”
缩略图之间的间距 - thumbbar_position=”left”
缩略图栏的位置: “left”, “lefttop”, “leftbottom” - thumbbar_y=”0″ ,
缩略图栏的y偏移 - thumbbar_x=”0″ ,
缩略图栏的x偏移 - thumbbar_width=”130″ ,
缩略图栏的宽度 - photo_max_height =”0.8”
图片相当屏幕的高度百分比，0.8相当于80% - thumbbar_open=”0″ ,
缩略图是否默认显示，0为不显示，1为显示 - thumbbar_color=”0x2D3E50″ ,
缩略图栏的背景颜色 - thumbbar_alpha=”0.3″ ,
缩略图栏的透明度 - thumbbar_color_b=”1 0xffffff 1″ ,
缩略图栏边框设置 （宽度 颜色 透明度） - frame_color_thumbnail=”1 0xffffff 1″ ,
被选中缩略图的边框设置 - frame_color_photo=”10,10,22,10 0x757575 0.8″,
图片的边框设置 （上 右 下 左 颜色 透明度） - Background_color=”0x000000″ ,
背景颜色 - marker_photo=”galSM.png” ,
已浏览图片的标记图片路径 - autoscrolling=”false” ,
是否在鼠标悬停时自动滚动 - slideshow_interval=”3″ ,
幻灯片的间隔时间 - text_open_thumbbar=”Show thumbnails” ,
当要显示缩略图时鼠标悬停显示的文字 - text_of_thumbbar =”Minimize thumbnails” ,
当要关闭缩略图时鼠标悬停显示的文字 - style_text_signature”text1galSM” ,
图片标题的文字样式 - style_text_photo_counter=”text1galSM”,
图片数量计数文字的样式 - titles_1=”Sun”,
对应图片的标题 - titles_2=”Winter”,
- titles_№=”…”,
- onclick_1=””,
对应图片1点击时执行的动作 - onclick_2=”Winter”,对应图片2点击时执行的动作
- onclick_№=”…”,
- one_photo=”№” 只打开相册中的某张照片，忽略其它照片。如果设置为0，则所有照片都会显示
- start_photo=”№” 打开相册时从第几张图片开始
- doubleclick_photo 点击图片执行动作时是使用双击还是单击
- video_”№”=”” 点击第№个缩略图打开对应的视频，视频由路径描述，例如”%HTMLPATH%/photo/9.mp4″
- youtube_”№”=”” 点击第№个缩略图打开对应的youtube视频，视频由youtube视频后缀描述，例如KmHoPeSak9A”
- photo=”%HTMLPATH%/photo/cats “
在 Gallery_M2.xml文件中有两个动作
- video_gal_on – 当视频播放器开启时调用
- video_gal_off – 当视频播放器关闭时调用
可用于停止音频声音，例如
|
1 2 3 |
<action name="video_gal_on" > if(soundinterface,pausesound(sound1);); /> |
在相册name中不要用连线，例如使用beach_bar而不是使用beach-bar
相册name不能用数字开头。
以下隐藏内容只提供VIP赞助会员，VIP会员说明请查看置顶文章
1.82版本请联系站长