效果预览：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. easyui-combobox实现省-市-区县级联菜单

    省:<input id="sheng" class="easyui-combobox" style="width:100px" dat ...

  2. PHP SESSION机制,从存储到读取

    PHP中,如果要获取SESSION数据,必须要有对应的session_id,session_id的获取方式有两种 1.基于客户端的cookie 2.基于url 先说第一种情况,基于客户端的cookie ...

  3. 判断手机端用户打开页面时是android还是ios,并将判断结果通过ajax返回给url接口，传递回去

    首先判断页面是android还是ios,然后利用ajax将结果通过接口url返回回去,记录到log日志中,以统计android和ios用户访问该页面的数量(数据统计) <script type= ...

  4. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  5. Backup Volume 操作 - 每天5分钟玩转 OpenStack（59）

    本节我们讨论 volume 的 Backup 操作. Backup 是将 volume 备份到别的地方(备份设备),将来可以通过 restore 操作恢复. Backup VS Snapshot 初看 ...

  6. scikit-learn 逻辑回归类库使用小结

    之前在逻辑回归原理小结这篇文章中,对逻辑回归的原理做了小结.这里接着对scikit-learn中逻辑回归类库的我的使用经验做一个总结.重点讲述调参中要注意的事项. 1. 概述 在scikit-lear ...

  7. 关于在Linux64位下安装xampp

    网上关于这个主题的内容比较少,所以就写一下按装后的心得.之前一直在windows下用xampp,想在Linux下也体验一把,可是自己的Linux装的是64位的在XAMPP的官网上http://www. ...

  8. vc下的静态链接库与动态链接库（一）

    一.静态库与动态库的区别 目前以lib后缀的库有两种,一种为静态链接库(Static Libary,以下简称“静态库”),另一种为动态连接库(DLL,以下简称“动态库”)的导入库(Import Lib ...

  9. ONE

    我是漆黑夜空中 闪烁凄凄的一颗星 遥隔千里的双眸一遇 看到了,你那藏在泪光里的话 你一个人 把泪擦干 把话捏在手心 陪着我,承受着黑夜的孤独 说明:来自落网的一个期刊<ONE>. 听这个期 ...

  10. WebStorm按Tab建快速生成代码模块

    WS中,比如调试每次都要写的console.log(xxx);每次都要敲一遍,还有if模块,for循环模块,难道没有快捷键,可以生成代码模块吗,答案是“有”. 操作步骤如下(汉化版WS): 1.Alt ...