支持触屏滑动的响应式相册jQuery插件

2024-03-20 分类：网站建设

大多数网页喜欢采用 lightbox 形式来展示相册图像，特别是电子商务购物网站最为常见，灯箱插件很多，若你还没找到一款称心的图像展示插件，可以看看今天设计达人网为大家分享的 lightGallery jQuery相册插件。

Light Gallery 插件使用响应式设计，良好兼容手机端，并支持触膜滑动方式来观看图像，简单直观的操作。

该相册插件功能丰富，下面列出一些特色：

全响应式兼容全屏展示模块化架构触屏滑动图像缩略图动画支持视频展示支持iFrame框架图像可放大缩小一个页面上可放多个DEMO 可能过CSS(SCSS)定制样式键盘切换图像支持字体图标

浏览器兼容

IE8+ 以及主流浏览器

使用教程

STEP 1 : 加载外部样式

<head> <link type=”text/css” rel=”stylesheet” href=”css/lightGallery.css” /> </head>

STEP 2 : 引入jQuery插件和lightGallery相册插件

<body> ….

<!– jQuery 版本 >= 1.8.0; –> <script src=”jquery.min.js”></script> <script src=”js/lightgallery.min.js”></script>

<!– 支持鼠标滑轮东键盘操作插件（可选）–> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js”></script>

<!– lightgallery 插件 –> <script src=”js/lg-thumbnail.min.js”></script> <script src=”js/lg-fullscreen.min.js”></script> </body>

STEP 4 : HTML 代码

<div id=”lightgallery”> <a href=”img/img1.jpg”> <img src=”img/thumb1.jpg” /> </a> <a href=”img/img2.jpg”> <img src=”img/thumb2.jpg” /> </a> … </div>

STEP 4 : JS 代码，用于激活插件

<script type=”text/javascript”> $(document).ready(function() { $(“#lightgallery”).lightGallery(); }); </script>

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

网页标题：支持触屏滑动的响应式相册jQuery插件
文章出自：/news12/320862.html

成都网站建设公司_创新互联，为您提供品牌网站设计、关键词优化、网站内链、虚拟主机、网站制作、网站收录

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容