欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > Lightbox和对话框 > jquery响应式lightbox插件Galpop

jquery响应式lightbox插件Galpop

jquery响应式lightbox插件Galpop

关键词:响应式,lightbox,弹出层,jquerylightbox插件,jquerylightbox,图片画廊,jQuery弹出层插件,ajax,iframe,jquery.galpop.js,jquery库,duihuakuang

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

简要教程

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>                  
                
Galpop jquery响应式lightbox插件的github地址为:https://github.com/Richard1320/Galpop

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_duihuakuang/8789.html

 在线演示  免费下载
编号:201804110000008789
大小:0.92MB
上传时间:2018-04-12 13:00
素材由用户"babykai213"上传分享。

标签

最新推荐素材

与jquery响应式lightbox插件Galpop相关的素材

.