图片/图形

Lightgallery 功能强大相册图片弹窗插件

也想出现在这里?联系我们
面包多

Lightgallery 功能强大相册图片弹窗插件-创客云
Lightgallery 是一款功能齐全的 jquery 图片查看器插件。该 jquery 图片查看器插件采用响应式设计,提供图片查看,图片轮播,图片放大等功能。它的特点还有:

以模态窗口的形式全屏展示图片

也想出现在这里?联系我们
创客主机

显示图片的标题

可以实现图片的懒加载

可以自动播放图片,并提供进度条显示

可以通过鼠标拖拽,点击切换按钮,移动设备滑动等方式来切换图片轮播

在底部显示图片的缩略图

支持图片的平移和缩放

提供下载按钮来下载图片

使用方法

在页面中引入 jquery 和 lightgallery-all.min.js 文件以及样式文件 lightgallery.css。

  1. <link href="css/lightgallery.css" rel="stylesheet">
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/lightgallery-all.js"></script>

HTML 结构

实现在页面中创建一个图片画廊,示例 demo 中以无序列表的方式来创建。通过 data-src 属性来指定高清大图的地址。你还可以在 data-responsive 属性中指定多个图片地址,分别用于适配不同设备的屏幕。data-sub-html 属性用于指定图片的标题。

  1. <ul id="lightgallery" class="list-unstyled row">
  2.   <li  data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="img/1-1600.jpg" data-sub-html="<h4>Fading Light</h4><p>图片标题1</p>">
  3.     <a href="">
  4.       <img class="img-responsive" src="img/thumb-1.jpg">
  5.     </a>
  6.   </li>
  7.   <li  data-responsive="img/2-375.jpg 375, img/2-480.jpg 480, img/2.jpg 800" data-src="img/2-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>图片标题2</p>">
  8.     <a href="">
  9.       <img class="img-responsive" src="img/thumb-2.jpg">
  10.     </a>
  11.   </li>
  12.   <li data-responsive="img/13-375.jpg 375, img/13-480.jpg 480, img/13.jpg 800" data-src="img/13-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>图片标题3</p>">
  13.     <a href="">
  14.       <img class="img-responsive" src="img/thumb-13.jpg">
  15.     </a>
  16.   </li>
  17.   <li data-responsive="img/4-375.jpg 375, img/4-480.jpg 480, img/4.jpg 800" data-src="img/4-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>图片标题4</p>">
  18.     <a href="">
  19.       <img class="img-responsive" src="img/thumb-4.jpg">
  20.     </a>
  21.   </li>
  22. </ul>

初始化插件

在页面 DOM 元素加载完毕之后,通过 lightGallery 方法来初始化该 jquery 图片查看器插件。

  1. $(document).ready(function(){
  2.   $('#lightgallery').lightGallery();
  3. });

配置参数

该 jquery 图片查看器插件的可用配置参数如下:

  1. $('#lightgallery').lightGallery({
  2.   mode: "lg-slide",
  3.   cssEasing: "ease",
  4.   easing: "linear",
  5.   speed: 600,
  6.   height: "100%",
  7.   width: "100%",
  8.   addClass: "",
  9.   startClass: "lg-start-zoom",
  10.   backdropDuration: 150,
  11.   hideBarsDelay: 6000,
  12.   useLeft: false,
  13.   closable: true,
  14.   loop: true,
  15.   escKey: true,
  16.   keyPress: true,
  17.   controls: true,
  18.   slideEndAnimatoin: true,
  19.   hideControlOnEnd: false,
  20.   mousewheel: true,
  21.   getCaptionFromTitleOrAlt: true,
  22.   appendSubHtmlTo: ".lg-sub-html",
  23.   subHtmlSelectorRelative: false,
  24.   preload: 1,
  25.   showAfterLoad: true,
  26.   selector: "",
  27.   selectWithin: "",
  28.   nextHtml: "",
  29.   prevHtml: "",
  30.   index: false,
  31.   iframeMaxWidth: "100%",
  32.   download: true,
  33.   counter: true,
  34.   appendCounterTo: ".lg-toolbar",
  35.   swipeThreshold: 50,
  36.   enableSwipe: true,
  37.   enableDrag: true,
  38.   dynamic: false,
  39.   dynamicEl: [],
  40.   galleryId: 1
  41. });

Github 地址:https://github.com/pankajkumar-official/jquery-image-gallery

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(2)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!