Gallerybox-全屏响应式jQuery图片画廊插件

jQuery Gallerybox是一款可以制作全屏响应式效果的jQuery图片画廊插件。该图片画廊带缩略图导航，支持半透明背景色，使用淡入淡出的动画过渡效果。它使用简单，而且效果非常不错。

演示页面中的瀑布流布局使用的是Pinterest Grid瀑布流布局插件-一款兼容IE8的瀑布流布局插件。

安装

可以通过npm来安装该图片画廊插件。

npm install jquery-gallerybox                
              

使用方法

使用该图片画廊插件需要引入jQuery、jquery.gallerybox.js和gallerybox.css文件

<link rel="stylesheet" type="text/css" href="css/gallerybox.css">              
<script src="js/jquery.min.js"></script>
<script src="js/jquery.gallerybox.js"></script>                
              

HTML结构

你只需要为所有用于制作图片画廊的图片添加相同的class类即可，例如：

<img src="image1.jpg" class="gbox">
<img src="image2.jpg" class="gbox">
......             
              

初始化插件

在页面DOM元素加载完毕之后，可以通过gallerybox()方法来初始化该图片画廊插件。

$('.gbox').gallerybox();                
              

或者在初始化时传入一些配置参数。

$('.gbox').gallerybox({
  bgColor: 'blue',
  bgOpacity: 0.5,
  closeText: 'EXIT'
});               
              

配置参数

该图片画廊插件有以下一些可用的配置参数。

jQuery Gallerybox插件的github地址为：https://github.com/rcus/jquery-gallerybox