问题
点击缩略图,在当前页或在新标签中打开大图,这种体验不好。
能不能达到这样的效果:点击缩略图,在当前页弹出一个弹框,显示大图。
效果图
解决方案
通过使用jQuery插件imgbox来实现。
学习资源
(jQuery Plugin - imgBox lightbox image)
http://www.htmldrive.net/items/show/390/jQuery-Plugin-imgBox-lightbox-image.html(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>
小提示
更改效果可以通过:
- 更改源代码中的$.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 };
- 给imgbox设置参数,
例如:
$("a.zoom").imgbox({ 'zoomOpacity': true, 'alignment': 'center' });
其中参数列表如下: