首页>>Jquery文字>>popup 弹出层弹出窗口 包括图片组浏览,ajax载入,地图等(2013-12-21)

popup 弹出层弹出窗口 包括图片组浏览,ajax载入,地图等

 代码仅仅只显示一部分，更多内容请看演示页面

popup 弹出层弹出窗口 包括图片组浏览,ajax载入,地图等
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <a class="image-popup-vertical-fit" href="../dalian.jpg" title="Caption. Can be aligned it to any side."> <img src="../dalian.jpg" width="75" height="75"> </a> <a class="image-popup-fit-width" href="../dandong.png" title="This image fits only horizontally."> <img src="../dandong.png" width="75" height="75"> </a>   
  2. <script>  
  3. $(document).ready(function() {  
  4.   
  5.     $('.image-popup-vertical-fit').magnificPopup({  
  6.         type: 'image',  
  7.         closeOnContentClick: true,  
  8.         mainClass: 'mfp-img-mobile',  
  9.         image: {  
  10.             verticalFit: true  
  11.         }  
  12.           
  13.     });  
  14.   
  15.     $('.image-popup-fit-width').magnificPopup({  
  16.         type: 'image',  
  17.         closeOnContentClick: true,  
  18.         image: {  
  19.             verticalFit: false  
  20.         }  
  21.     });  
  22.   
  23.     $('.image-popup-no-margins').magnificPopup({  
  24.         type: 'image',  
  25.         closeOnContentClick: true,  
  26.         closeBtnInside: false,  
  27.         mainClass: 'mfp-no-margins', // class to remove default margin from left and right side  
  28.         image: {  
  29.             verticalFit: true  
  30.         }  
  31.     });  
  32.   
  33. });  
  34. </script>  
  35. <h2>Lightbox gallery</h2>  
  36. <div class="popup-gallery"> <a href="../dalian.jpg" title="The Cleaner"><img src="../dalian.jpg" width="75" height="75"></a> <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"></a> <a href="../demo1.jpg" title="The Uninvited Guest"><img src="../demo1.jpg" width="75" height="75"></a> <a href="../demo2.jpg" title="Oh no, not again!"><img src="../demo2.jpg" width="75" height="75"></a> </div>  
  37. <script>  
  38. $(document).ready(function() {  
  39.     $('.popup-gallery').magnificPopup({  
  40.         delegate: 'a',  
  41.         type: 'image',  
  42.         tLoading: 'Loading image #%curr%...',  
  43.         mainClass: 'mfp-img-mobile',  
  44.         gallery: {  
  45.             enabled: true,  
  46.             navigateByImgClick: true,  
  47.             preload: [0,1] // Will preload 0 - before current, and 1 after the current image  
  48.         },  
  49.         image: {  
  50.             tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',  
  51.             titleSrc: function(item) {  
  52.                 return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';  
  53.             }  
  54.         }  
  55.     });  
  56. });  
  57. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_197.html