jquery响应式lightbox插件Galpop

Galpop是一款jquery响应式lightbox插件。该jquery响应式lightbox插件可以用于展示图片，HTML内容，iframe和ajax内容等，功能非常强大。它的特点还有：

• 支持使用左右方向键来控制切换，支持ESC键关闭lightbox。
• 支持前后导航箭头按钮。
• 支持图片的无限循环。
• 窗口尺寸改变时会自动更新lightbox。
• 支持图片预加载Loading效果。

安装

可以通过nmp或bower来安装galpop。

$ bower install galpop
$ npm install galpop                  
                

使用方法

在页面中引入jquery，jquery.galpop.min.js和jquery.galpop.css文件。

<link href="dist/jquery.galpop.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>      
<script src="js/jquery.galpop.min.js"></script>      
                

HTML结构

一个最基本的lightbox的HTML结构如下：

<a class="galpop-single" href="1.jpg">
  <img src="1.jpg" alt="image 1">
</a>
                

$('.galpop-single').galpop();                  
                

如果需要创建一组图片的Lightbox，它的HTML结构如下：注意，它们必须有相同的class名称。

<a class="galpop-multiple" 
   data-galpop-group="multiple" 
   href="1.jpg">
   <img src="1.jpg">
 </a>
<a class="galpop-multiple" 
   data-galpop-group="multiple" 
   href="2.jpg">
   <img src="3.jpg">
 </a>
 <a class="galpop-multiple" 
   data-galpop-group="multiple" 
   href="3.jpg">
   <img src="3.jpg">
 </a>
 ...
                

$('.galpop-multiple').galpop();                  
                

另外，你还可以在lightbox上添加下面的data属性。

• data-galpop-link：自定义链接。
• data-galpop-link-title：链接的标题。
• data-galpop-link-target：链接的目标元素。
• title：图片的标题。

<a class="galpop-multiple" 
   data-galpop-group="multiple" 
   data-galpop-link="1.jpg"
   data-galpop-link-title="Click Here For More Info" 
   data-galpop-link-target="_blank" 
   title="Image Caption"
   href="1.jpg">
   <img src="1.jpg">
 </a>
<a class="galpop-multiple" 
   data-galpop-group="multiple" 
   data-galpop-link="2.jpg"
   data-galpop-link-title="Click Here For More Info" 
   data-galpop-link-target="_blank" 
   title="Image Caption"
   href="2.jpg">
   <img src="2.jpg">
</a>
<a class="galpop-multiple" 
   data-galpop-group="multiple" 
   data-galpop-link="3.jpg"
   data-galpop-link-title="Click Here For More Info" 
   data-galpop-link-target="_blank" 
   title="Image Caption"
   href="3.jpg">
   <img src="3.jpg">
</a>