N氏相册插件

演示

 

简介

  • 最新版本 1.8.1
  • 可在漫游中添加任意数量的带有缩略图功能的相册
  • 每个相册中可添加任意数量的图片
  • 不需要预先设定图片,只需要输入图片的名字和数量
  • 可插入视频或者youtube视频
  • 可定制背景和边框的尺寸、颜色和透明度以及更多设置
  • 对于单独的相册可进行针对性的设置
  • 可设置按钮
  • 图片可放大缩小和拖拽,可使用鼠标滚轮进行浏览上一张或者下一张图片的功能,也可以进行幻灯片浏览
  • 可以为图片设置描述
  • 设置双击图片时执行的动作(如打开链接,打开文档等)

 

功能

1 缩略图窗口

这是一个包含图片的缩略图窗口。可按住鼠标左键或者鼠标滚轮进行浏览。左侧的滑条可显示缩略图在窗口中的位置。按住滑条上下拖动可以浏览。当鼠标悬停在缩略图上时,缩略图会放大。鼠标点击缩略图时,会打开对应的图片,然后缩略图上会出现一个已浏览的标签。当在图片浏览窗口浏览图片时,缩略图窗口中的缩略图也会发生相应的位置和颜色变化。点击窗口右侧的最小化按钮,缩略图会向左隐藏。在调用相册时,可设置是否打开或隐藏缩略图窗口。你可以在设置中打开当鼠标悬停时自动滚动的功能。

2 图片浏览窗口

该窗口可调节大小,颜色和透明度。预览窗口会自动缩放。当缩略图框被最小化时,图片窗口会移动到中心。

控制按钮:

  • “浏览”照片的按钮位于窗口左侧和右侧。
  • 幻灯片放映按钮位于窗口的右下角。
  • 右侧底部为您正在查看的照片的序号/相册中的照片总数。左下角是照片标题。
  • 左下是照片标题。签字样式可调整。
  • “关闭”按钮。当你点击背景时,也可以关闭。
  • 右下角的背景上为“浏览照片”按钮。
  • 在右下角的背景上放大按钮“+”“ – ”。按住分别放大或缩小照片。鼠标滚轮也可以缩放图片。
  • 照片可被鼠标左键拖动。

按钮图片位于文件夹”iconGL”,可使用自定义图片进行替换。

视频窗口

当把鼠标悬浮在视频上,会出现带有按钮的面板。

  • 播放暂停按钮在视频窗口左下角。
  • 在音量按钮旁边的按钮点击可静音。当你悬浮鼠标时,音量滑条会出现,
  • 最右侧是时间线。

 

为相册准备图片和缩略图

对应每一个相册准备图片和缩略图,每个照片要有相同的前缀以及对应的编号(例如 – cats1.jpg,cats2.jpg …cats№.jpg),同时还要准备小尺寸的缩略图,例如存放在使他们的缩略图缩小窗口(缩小尺寸)和地点 他们在,例如,文件夹“m”。
照片只能是jpg格式。
在设置中只需要输入照片的名称和数量,照片数量和序号将自动添加到名字中。 缩略图的照片会自动调整宽度和高度。

 

使用方法

将Galereya_photoSM文件夹放在项目根目录下。

在主xml中放入下面高亮代码:

在需要调用相册的位置设置事件。参数为相册自定义元素的名字,例如这里用的是cats,则在Setting_galereya.xml有cats元素。

如需要默认设置,只需要指定下面的就可以了,例如12张照片 – cats1.jpg,cats2.jpg…cats12.jpg

  • 图片的路径 (%HTMLPATH%/photo/cats)
  • 缩略图的路径 (%HTMLPATH%/photo/m/cats)
  • 图片数量(12)
 

也可以进行自定义设置

注意!

如果你在漫游中使用了onmousewheel事件,那么你需要同时写上listaty_Wheel();

例如

同时要在Gallery_M2.xml移除下面代码

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”

在 Gallery_M2.xml文件中有两个动作

  • video_gal_on – 当视频播放器开启时调用
  • video_gal_off – 当视频播放器关闭时调用

可用于停止音频声音,例如

在相册name中不要用连线,例如使用beach_bar而不是使用beach-bar

相册name不能用数字开头。

 

以下隐藏内容只提供VIP赞助会员,VIP会员说明请查看置顶文章

 

演示视频

链接:https://pan.baidu.com/s/1slN10f7Y-v7CZ_mCJRCHmQ 密码:of00