相册插件

演示

 

简介

  • 最新版本 1.5
  • 可在漫游中添加任意数量的带有缩略图功能的相册
  • 每个相册中可添加任意数量的图片
  • 不需要预先设定图片,只需要输入图片的名字和数量
  • 可定制背景和边框的尺寸、颜色和透明度以及更多设置
  • 对于单独的相册可进行针对性的设置
  • 可设置按钮
  • 图片可放大缩小和拖拽,可使用鼠标滚轮进行浏览上一张或者下一张图片的功能,也可以进行幻灯片浏览

 

功能

1 缩略图窗口

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

2 图片浏览窗口

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

控制按钮:

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

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

 

为相册准备图片和缩略图

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

 

使用方法

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

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

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

如需要默认设置,只需要指定下面的就可以了

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

也可以进行自定义设置

注意!

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

例如

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

 

设置

在Setting_galereya.xml对应Galereya(Set_1)中参数的自定义元素。

不要用逗号取代句号。

Set_0 默认设置

Set_1 第一个相册的设置

    • photo=”%HTMLPATH%/photo/cats “ 
      图片的路径与文件名前缀,例如 %HTMLPATH%/photo/cats,则对应photo文件夹下必须要有(cats1,cats2…cats加数字这样的图片)
    • miniature_photo=”%HTMLPATH%/photo/mini/cats “ 
      缩略图的路径与文件名前缀
    • number_thumbnails=”10” 
      相册的图片数量
    • Step_miniature=”5” 
      缩略图之间的间距
    • W_prop=”6” 
      图片宽度比例
    • H_prop=”3” 
      图片高度比例
    • photo_height =”90%”
      图片相当窗口的高度
    • thumbbar_position=”left” 
      缩略图栏的位置: “left”, “lefttop”, “leftbottom”
    • thumbbar_y=”0″ ,
      缩略图栏的y偏移
    • thumbbar_x=”0″ ,
      缩略图栏的x偏移
    • thumbbar_width=”130″ ,
      缩略图栏的宽度
    • thumbbar_height=”50%” ,
      缩略图栏的高度
    • 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_№=”…”,

 

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

 

购买

源码 请联系站长 QQ 178941086。