效果预览：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

jQuery弹出窗口浏览图片的更多相关文章

  1. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  2. Jquery弹出窗口

    今天讲了Jquery的弹出窗口的组成和用法: 先把引用文件的代码写好: // 每个弹窗的标识 var x =0; var idzt = new Array(); var Window = functi ...

  3. jQuery 弹出窗口的形式一直是具体案件的中心

    在网上查 多 不是不符合无效;因此,一些自己总结,解决这个问题   原则: 常见问题: 弹出层居中了,背景也是半透明的  可是发现一拉动滚动栏立即就露馅了发现背景仅仅设置了屏幕所在段,其它部分都是原来 ...

  4. JQuery弹出窗口小插件ColorBox

    本文来自: Small_陌 http://www.cnblogs.com/wggmqj/archive/2011/11/04/2236263.html 今天在博客园看到一篇<ASP.NET MV ...

  5. jQuery弹出美女大图片

    效果:http://hovertree.com/texiao/jqimg/2/ 效果图: 下载:http://hovertree.com/h/bjaf/jdaqepet.htm HTML代码: < ...

  6. FancyBox——jQuery弹出窗口插件

    最近工作项目中有用到这款插件,就查找了一下相关资料和用法,下面是一些基本的简单用法,比较容易掌握,有需要的小伙伴可以参考.:) FancyBox是一款基于jquery开发的类Lightbox插件.支持 ...

  7. C# 弹出窗口查看图片以及上传图片

    private void ShowSelectedPicture(string path) { FileStream fs = File.OpenRead(path); //OpenRead ; fi ...

  8. jquery弹出窗口选择回写值

    $(document).ready(function(){ $('.sel').dblclick(function(){ var nowid=$(this).attr('id'); window.op ...

  9. jquery-通过js编写弹出窗口

    本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

随机推荐

  1. angularjs自动化测试系列之karma

    angularjs自动化测试系列之karma karma test with jasmine 更好的利用工具是为了让生活更美好. 需要安装的东西: npm install karma -g mkdir ...

  2. SQLSERVER中的假脱机spool

    SQLSERVER中的假脱机spool 我发现网上对于假脱机的解释都非常零散,究竟假脱机是什么? 这几天在家里研究了一下,收集了很多网上的资料 假脱机是中文的翻译,而英文的名字叫做 spool 在徐老 ...

  3. FPGA Timing笔记

    很多FPGA工程师都会遇到timing的问题,如何让FPGA跑到更快的处理频率是永久话题.决定FPGA的timing关键是什么?如何才能跑到更快的频率呢? A. 第一步需要了解FPGA的timing路 ...

  4. android:windowSoftInputMode属性详解

    android:windowSoftInputMode activity主窗口与软键盘的交互模式,可以用来避免输入法面板遮挡问题,Android1.5后的一个新特性. 这个属性能影响两件事情: [一] ...

  5. js 中类似时钟的显示

    先上代码 <!DOCTYPE html> <html> <head> <script> function startTime() { var today ...

  6. JavaScript中Promises/A+规范的实现

    Promises是一种异步编程模型,通过一组API来规范化异步操作,这样也能够让异步操作的流程控制更加容易. 下面的代码是假设执行一个异步队列,每一项都会使用上一项返回的数据: function ne ...

  7. spring笔记--通过注解(annotation)配置Bean

    Spring能够在classpath下自动扫描,侦测和实例化具有特定注解的组件,这在Spring中成为组件扫描(Component scanning). 特定组件的注解包括: @Component:基 ...

  8. 何谓Restful

    引言 用过ASP.NET WebApi2.0, 上次去面试被问到什么是Restful ,一时间竟不知道从何说起,所以搜集资料,做个备注,有时间好多来看看加深理解. 什么是Restful 一种软件架构风 ...

  9. 做图表统计你需要掌握SQL Server 行转列和列转行

    说在前面 做一个数据统计和分析的项目,每天面对着各种数据,经过存储过程从源表计算汇总后需要写入中间结果表以提高数据使用效率,那么此时就需要用到行转列和列转行. 1.列转行 数据经过计算加工后会直接生成 ...

  10. 2.羽翼sqlmap学习笔记之MySQL注入

    1.判断一个url是否存在注入点: .sqlmap.py -u "http://abcd****efg.asp?id=7" -dbs 假设找到数据库:student ------- ...