jQuery弹出窗口浏览图片
2024-09-01 08:52:58
效果预览：http://keleyi.com/keleyi/phtml/jqtexiao/3.htm
HTML文件代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹出灯箱窗口浏览图片-柯乐义</title>
<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/css/keleyi.css">
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/js/keleyi.min.js"></script>
<style>img{border:0px}</style>
</head> <body>
<h2>弹出窗口浏览图片</h2>
<div><a href="http://keleyi.com/a/bjac/ppdss7ux.htm">原文</a>
请点击下列图片
</div>
<div class="dengxaing-keleyi-com"> <a title="2013-8-21" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-8-21_w.jpg">
<img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-8-21_s.jpg"></a> <a title="2013-9-13" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-13_w.jpg">
<img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-13_s.jpg"></a> <a title="2013-9-15" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-15_w.jpg">
<img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-15_s.jpg"></a> <a title="2013-9-16" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-16_w.jpg">
<img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-16_s.jpg"></a> <a title="2013-9-17" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-17_w.jpg">
<img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-17_s.jpg"></a> <a title="2013-9-23" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-23_w.jpg">
<img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-23_s.jpg"></a> <a title="2013-10-2" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-10-2_w.jpg">
<img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-10-2_s.jpg"></a>
</div> <script type="text/jscript">
$(document).ready(function() { $('.dengxaing-ke' + 'leyi-com').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Keleyi</small>';
}
}
}); }); </script>
</body>
</html>
原文：http://keleyi.com/a/bjac/ppdss7ux.htm
更多:http://keleyi.com/a/bjac/s3sw6q5t.htm
web前端汇总：http://www.cnblogs.com/jihua/p/webfront.html
最新文章
- WPF 自定义搜索框
- extJs学习基础5 理解mvvm的一个小案例
- 为什么调用 FragmentPagerAdapter.notifyDataSetChanged() 并不能更新其 Fragment？
- 分享20个吸引眼球的高品质免费PSD网站模板
- webservice 的wsdl文件生成客户端java类
- hdu 2082
- 创建UIImage的两种方法
- Android：Style和Theme
- Jenkins(转)
- 百度AI开放平台- API实战调用
- Spark SQL数据源
- Head First设计模式之桥接模式
- heartbeat单独提供高可用服务
- python字符串魔法
- nginx 隐藏 index.php 和 开启 pathinfo 模式的配置
- 读书笔记 C#事件event浅析(一)
- springcloud~演化的微服务架构
- Hyperldeger Fabric踩过的坑
- 佣金维护测试sql
- CentOS 6.8 安装JDK8