效果预览：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. 小谈Java里的线程

    今天,我们来谈一谈Java里的线程. 一.进程与线程的基本概念 大家可能没听过线程这个概念,但是相信,用计算机的朋友都听过进程这个概念.打开电脑的任务管理器,我们就可以看到许多进程.它们主要分为三类, ...

  2. JS-underfined is not a function

  3. MVC实用架构设计（三）——EF-Code First（3）：使用T4模板生成相似代码

    前言 经过前面EF的<第一篇>与<第二篇>,我们的数据层功能已经较为完善了,但有不少代码相似度较高,比如负责实体映射的 EntityConfiguration,负责仓储操作的I ...

  4. (转)对Lucene PhraseQuery的slop的理解

    所谓PhraseQuery,就是通过短语来检索,比如我想查"big car"这个短语,那么如果待匹配的document的指定项里包含了"big car"这个短语 ...

  5. 我的Objective-C系列文章

    做iOS开发有一段时间了,也有自己上线的App产品,也在坚持着发表技术博客总结自己所学的东西.在写博客的时候虽然博文中不免有错别字,但每句话都是在斟酌之后所写的,每篇博客所粘贴的代码都是经过调试运行无 ...

  6. 如何用Pivot实现行列转换

    在Oracle中,如果要实现行列转换,较为常见的是用DECODE和CASE语句.对于简单的行列转行,DECODE和CASE语句尚能应付.在逻辑比较复杂,分组聚合较多的场景中,DECODE和CASE语句 ...

  7. T-Sql（六）触发器（trigger）

    不知不觉讲到触发器了,一般我们做程序的很少接触到触发器,触发器的操作一般是DB人员来完成. 然而有的时候一些简单的业务需要我们自己去完成,不能每次都去麻烦DB人员,所以说,编程人员要全才,除了编程以为 ...

  8. 解决ajax跨域请求 （总结）

    ajax跨域请求,目前已用几种方法实现:   1)用原生js的xhr对象实现.                var url="http://freegeoip.net/json/" ...

  9. 1Z0-053 争议题目解析498

    1Z0-053 争议题目解析498 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 498.The database Is configured in ARCHIVELOG mode ...

  10. T-SQL CROSS APPLY、MERGE

    写在前面 刚才看项目里一个存储过程,也是好长时间没有使用Sql Server2008了,好多写法和函数感觉到陌生,这就遇到了CROSS APPLY 和MERGE的语法,两者之前完全没接触过. 所以专门 ...