【jQuery】点击缩略图查看大图-imgbox

问题

点击缩略图,在当前页或在新标签中打开大图,这种体验不好。
能不能达到这样的效果:点击缩略图,在当前页弹出一个弹框,显示大图。

效果图

【jQuery】点击缩略图查看大图-imgbox_第1张图片

解决方案

通过使用jQuery插件imgbox来实现。

学习资源

  1. (jQuery Plugin - imgBox lightbox image)
    http://www.htmldrive.net/items/show/390/jQuery-Plugin-imgBox-lightbox-image.html

  2. (5种jQuery弹出大图效果)
    http://www.lanrentuku.com/js/tupian-933.html

解决具体步骤

引用资源:
  
  
  
  
<link rel="stylesheet" href="imgbox/css/imgbox.css"/>
<script src="imgbox/js/jquery.min.js"></script>
<script src="imgbox/js/jquery.imgbox.pack.js"></script>
HTML代码
  
  
  
  
<a class="zoom-1" title="test my picture1" href="images/lou-normal.jpg"><img src="images/lou-min.jpg"/></a>
jQuery中代码
  
  
  
  
$("a.zoom-1").imgbox();

完整代码:

  
  
  
  
<html>
<head>
<style>
div{
width:50%;
}
</style>
<link rel="stylesheet" href="imgbox/css/imgbox.css"/>
<script src="imgbox/js/jquery.min.js"></script>
<script src="imgbox/js/jquery.imgbox.pack.js"></script>
<script>
$(document).ready(function(){
$("a.zoom-1").imgbox();
$("a.zoom-2").imgbox({'alignment':'center','zoomOpacity': true,'speedIn':0});
$("a.zoom-3").imgbox({'overlayShow':true,'alignment':'center','speedIn':0,'speedOut':0});
$("a.zoom-4").imgbox({'hideOnOverlayClick':true,'allowMultiple' : false});
$("a.zoom-5").imgbox({'hideOnContentClick':true,'allowMultiple' : false});
$("a.zoom-6").imgbox({'speedIn':0,'speedOut':0,'allowMultiple' : false});
});
</script>
</head>
<body>
<div>
<a class="zoom-1" title="test my picture1" href="images/lou-normal.jpg"><img src="images/lou-min.jpg"/></a>
<a class="zoom-2" title="test my picture2" href="images/lou-normal.jpg"><img src="images/lou-min.jpg"/></a>
<a class="zoom-3" title="test my picture3" href="images/lou-normal.jpg"><img src="images/lou-min.jpg"/></a>
<a class="zoom-4" title="test my picture4" href="images/lou-normal.jpg"><img src="images/lou-min.jpg"/></a>
<a class="zoom-5" title="test my picture5" href="images/lou-normal.jpg"><img src="images/lou-min.jpg"/></a>
<a class="zoom-6" title="test my picture6" href="images/lou-normal.jpg"><img src="images/lou-min.jpg"/></a>
</div>
</body>
</html>

小提示

更改效果可以通过:

  1. 更改源代码中的$.fn.imgbox.defaults
  
  
  
  
$.fn.imgbox.defaults = {
padding : 10,
alignment : 'auto', // auto OR center
allowMultiple : true,
autoScale : true,
speedIn : 500,
speedOut : 500,
easingIn : 'swing',
easingOut : 'swing',
zoomOpacity : false,
overlayShow : false,
overlayOpacity : 0.5,
hideOnOverlayClick : true,
hideOnContentClick : true
};
  1. 给imgbox设置参数,
    例如:
  
  
  
  
$("a.zoom").imgbox({
'zoomOpacity' : true,
'alignment' : 'center'
});

其中参数列表如下:

【jQuery】点击缩略图查看大图-imgbox_第2张图片

资源下载(http://download.csdn.net/detail/ly1414725328/9095583)

你可能感兴趣的:(jquery)