当前位置:JS特效 » 其他 » jquery响应式lightbox插件Galpop
 jquery响应式lightbox插件Galpop
如果您觉得内容不错,请分享:

插件介绍

Galpop是一款jquery响应式lightbox插件。该jquery响应式lightbox插件可以用于展示图片,HTML内容,iframe和ajax内容等,功能非常强大。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:82
简要教程

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文件。


      
      
                
HTML结构

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


  image 1

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

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


   
 

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

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

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

   
 

   


   
                  
                
Galpop jquery响应式lightbox插件的github地址为:https://github.com/Richard1320/Galpop

Top