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