最新消息:欢迎加入小松的QQ群一起讨论一起学习,本站启用elasticsearch全文检索系统,提供搜索的精确度

jQuery图片浏览控件lightBox

wordpress 1467浏览 0评论

lightBox是一个图片浏览的插件,也有人叫灯箱效果,用于实现类似模态对话框的效果;
lightBox官方地址http://www.lokeshdhakar.com/projects/lightbox2/

下面我来写一个demo简单演示一下
首先下载lightBox插件,取出插件需要的文件
css/lightbox.css
js/jquery-1.11.0.min.js
js/lightbox.js
新建demo.html,内容为

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body>
<a href="https://static.phpsong.com/wp-content/uploads/2015/03/2015032206005571160.jpg" data-lightbox="roadtrip"><img src="https://static.phpsong.com/wp-content/uploads/2015/03/2015032206005571160-220x150.jpg" width="220" height="150"></a>
<a href="https://static.phpsong.com/wp-content/uploads/2015/03/2015030609524411958.jpg" data-lightbox="roadtrip"><img src="https://static.phpsong.com/wp-content/uploads/2015/03/2015030609524411958.jpg" width="220" height="150"></a>
<a href="https://static.phpsong.com/wp-content/uploads/2015/03/2015031712391081884.jpg" data-lightbox="roadtrip"><img src="https://static.phpsong.com/wp-content/uploads/2015/03/2015031712391081884.jpg" width="220" height="150"></a>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>

直接预览
lightBox demo预览效果
点击图片的效果
lightBox 点击图片的效果

QQ交流群:136351212

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» jQuery图片浏览控件lightBox
本文链接地址:https://www.phpsong.com/563.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!