jQuery弹出窗口浏览图片

效果预览：http://keleyi.com/keleyi/phtml/jqtexiao/3.htm

HTML文件代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>弹出灯箱窗口浏览图片-柯乐义</title>
 6 <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/css/keleyi.css">
 7 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
 8 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/js/keleyi.min.js"></script>
 9 <style>img{border:0px}</style>
10 </head>
11
12 <body>
13 <h2>弹出窗口浏览图片</h2>
14 <div><a href="http://keleyi.com/a/bjac/ppdss7ux.htm">原文</a>
15 请点击下列图片
16 </div>
17 <div class="dengxaing-keleyi-com">
18
19 <a title="2013-8-21" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-8-21_w.jpg">
20 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-8-21_s.jpg"></a>
21
22 <a title="2013-9-13" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-13_w.jpg">
23 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-13_s.jpg"></a>
24
25 <a title="2013-9-15" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-15_w.jpg">
26 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-15_s.jpg"></a>
27
28 <a title="2013-9-16" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-16_w.jpg">
29 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-16_s.jpg"></a>
30
31 <a title="2013-9-17" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-17_w.jpg">
32 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-17_s.jpg"></a>
33
34 <a title="2013-9-23" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-23_w.jpg">
35 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-9-23_s.jpg"></a>
36
37 <a title="2013-10-2" href="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-10-2_w.jpg">
38 <img width="133" height="75" src="http://keleyi.com/keleyi/phtml/jqtexiao/3/images/keleyi-com-2013-10-2_s.jpg"></a>
39 </div>
40
41 <script type="text/jscript">
42 $(document).ready(function() {
43
44 $('.dengxaing-ke' + 'leyi-com').magnificPopup({
45 delegate: 'a',
46 type: 'image',
47 tLoading: 'Loading image #%curr%...',
48 mainClass: 'mfp-img-mobile',
49 gallery: {
50 enabled: true,
51 navigateByImgClick: true,
52 preload: [0,1] // Will preload 0 - before current, and 1 after the current image
53 },
54 image: {
55 tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
56 titleSrc: function(item) {
57 return item.el.attr('title') + '<small>by Keleyi</small>';
58 }
59 }
60 });
61
62
63 });
64
65 </script>
66 </body>
67 </html>

原文：http://keleyi.com/a/bjac/ppdss7ux.htm

更多:http://keleyi.com/a/bjac/s3sw6q5t.htm

web前端汇总：http://www.cnblogs.com/jihua/p/webfront.html

jQuery弹出窗口浏览图片相关推荐

实用的 jquery 弹出窗口插件winbox
实用的 jquery 弹出窗口插件winbox 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 应用演示: ...
jquery 弹出窗口_jQuery弹出窗口和工具提示窗口动画效果
jquery 弹出窗口 In this tutorial, we are going to discuss about a jQuery plugin for responsive and acces ...
jQuery弹出窗口完整代码
效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
创建弹出窗口的图片展示
本帖最后由 oisweb 于 2009-11-24 14:11 编辑图片有点大了显示不是很好自己看着办吧 1 创建工程设置页面属性 <mx:Application xmlns:mx=&q ...
JQuery弹出窗口小插件ColorBox
ColorBox官方网站:http://colorpowered.com/colorbox/ colorbox()函数使用一堆key/value对象和一个可选的callback函数格式:$('sele ...
用jQuery实现弹出窗口/弹出div层
原文链接:http://hi.baidu.com/awz_tiger/item/863cfc10c4bb0f6171d5e8d9 http://blog.163.com/qiuxinke2006@12 ...
自适应图片大小的弹出窗口(3 中方法)
方法一在最近的项目中,遇到一个问题,要实现这样的效果: 点pic_small.Aspx页面的缩略图后弹出pic_all.aspx页面,pic_all.aspx页面的大小要根据图片大小自动 ...
JavaScript自适应图片大小的弹出窗口
很多时候我们需要提供这样的功能给访问者:当访问者点击页面中的缩略图时,其对应的全尺寸图片将显示在一个新的弹出窗口中供访问者查看. 实现此功能的最简单作法是用以下HTML代码创建一个图像链接: < ...
怎么用jQuery做弹出窗口
用jQuery做弹出窗口的方法:首先设置button标签的id为mybutton:然后通过id获得button对象,给它绑定click点击事件:最后当按钮被点击时,使用[confirm()]方法弹出对 ...

jQuery弹出窗口浏览图片

jQuery弹出窗口浏览图片相关推荐

最新文章

热门文章