image lightbox图片的灯箱效果
先上代码：
注意：1、引入magnific-popup.css,jquery-1.7.1.min.js,jquery.magnific-popup.min.js 这三个网上都有下载
2、准备6张image，3张大的，3张小的。代码中src是小图，href是大图。
<!DOCTYPE HTML>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Magnific Popup</title> <link rel="stylesheet" type="text/css" href="css/magnific-popup.css"> <script src="js/jquery-1.7.1.min.js" ></script> <script src="js/jquery.magnific-popup.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.image-popup-vertical-fit').magnificPopup({ type: 'image', closeOnContentClick: true, mainClass: 'mfp-img-mobile', image: { verticalFit: true } }); $('.image-popup-fit-width').magnificPopup({ type: 'image', closeOnContentClick: true, image: { verticalFit: false } }); $('.image-popup-no-margins').magnificPopup({ type: 'image', closeOnContentClick: true, closeBtnInside: false, mainClass: 'mfp-no-margins', // class to remove default margin from left and right side image: { verticalFit: true } }); }); </script> </head> <body> <h2>Single image lightboxview source </h2> <ul class="magnific"> <li> <a class="image-popup-vertical-fit" href="images/bigPic1.jpg"> <img width="75" height="75" src="images/smallPic1.jpg"> </a> </li> <li> <a class="image-popup-fit-width" href="images/bigPic2.jpg"> <img width="75" height="75" src="images/smallPic2.jpg"> </a> </li> <li> <a class="image-popup-no-margins" href="images/bigPic2.jpg"> <img width="75" height="75" src="images/smallPic2.jpg"> </a> </li> </ul> </body> </html>
如果你还想兼容手机，只需添加下面两行代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
上面是可以识别设备，自适应屏幕大小。
下面是用来在android手机a,button,input highlight时避免那个难看的背景色用的。
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
