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

最新推荐文章于 2021-05-24 17:23:24 发布

lyloou

最新推荐文章于 2021-05-24 17:23:24 发布

阅读量2.8w

点赞数 2

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/ly1414725328/article/details/48345719

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

问题

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

效果图

解决方案

通过使用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'
});

其中参数列表如下：

资源下载（http://download.csdn.net/detail/ly1414725328/9095583）

lyloou

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
【jQuery】点击缩略图查看大图-imgbox

问题点击缩略图，在当前页或在新标签中打开大图，这种体验不好。能不能达到这样的效果：点击缩略图，在当前页弹出一个弹框，显示大图。效果图解决方案通过使用jQuery插件imgbox来实现。学习资源(jQuery Plugin - imgBox lightbox image)http://www.htmldrive.net/items/show/390/jQuery-Plugin-imgBox-ligh...
复制链接

扫一扫

专栏目录