jquery Magnific Popup是jquery的image插件中最好的，也是使用者最多的，拿来分享一下它的用法
官网http://dimsemenov.com/plugins/magnific-popup/
<!DOCTYPE HTML>
<meta charset="UTF-8">
<head>
<script src="jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="dist/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<!-- Magnific Popup core JS file -->
<script src="dist/jquery.magnific-popup.js"></script>
<style>
* {
margin:0;
padding:0;
}
</style>
<script>
$(document).ready(function() {
$('.test-popup-link').magnificPopup({type:'image'}); //单个图片显示
$('.image-link').magnificPopup({type:'image',zoom: {
enabled: true}});//带zoom效果的
$('.parent-container').magnificPopup({
delegate: 'a', // child items selector, by clicking on it popup will open
type: 'image',
gallery:{enabled:true},
zoom: {
enabled: true}
// other options
});//多图片zoom效果
});
</script>
</head>
<body class="sapUiBody">
<a class="test-popup-link" href="http://pic6.nipic.com/20100423/4537140_133035029164_2.jpg">Open popup</a>
<a href="http://pic6.nipic.com/20100423/4537140_133035029164_2.jpg" class="image-link">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTQhKMkeTktThLfgD_p8SsVR9TDypdrE5UOEu-j-exjhrTdQ-GdmHTlMRU" />
</a>
<div class="parent-container">
<a href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" class="image-laink">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" />
</a>
<a href="http://pic6.nipic.com/20100423/4537140_133035029164_2.jpg" class="image-alink">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTQhKMkeTktThLfgD_p8SsVR9TDypdrE5UOEu-j-exjhrTdQ-GdmHTlMRU" />
</a>
</div>
</body>
7223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
