带放大镜效果的jQuery LightBox图片画廊插件

当前位置:主页 > jQuery库 > Lightbox和对话框 > 带放大镜效果的jQuery LightBox图片画廊插件
带放大镜效果的jQuery LightBox图片画廊插件
分享:

    插件介绍

    zbox是一款带放大镜效果的jQuery LightBox图片画廊插件。该Lightbox插件可以显示相应缩略图的高清大图,并且在浏览高清大图时还可以使用放大镜来局部查看放大效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-03-14
    阅读:
简要教程

zbox是一款带放大镜效果的jQuery LightBox图片画廊插件。该Lightbox插件可以显示相应缩略图的高清大图,并且在浏览高清大图时还可以使用放大镜来局部查看放大效果。

zbox Lightbox特效

使用方法

使用该LightBox插件需要引入jQuery和jquery.zbox.css,以及jquery.zbox.js文件

<link type="text/css" rel="stylesheet" href="css/jquery.zbox.css" />               
<script src="js/jquery.min.js"></script>
<script src="js/jquery.zbox.js"></script>       
                
HTML结构

该LightBox插件的基本HTML结构使用一个超链接来包裹一个图片元素,超链接指向高清大图。

<a class="zb" rel="group" href="1.png" title="Image 1">
  <!--缩略图-->
  <img src="1_thumb.png">
</a>

<a class="zb" rel="group" href="2.png" title="Image 2">
  <!--缩略图-->
  <img src="2_thumb.png">
</a>

<a class="zb" rel="group" href="3.png" title="Image 3">
  <!--缩略图-->
  <img src="thumb3.png">
</a>           
                
初始化插件

在页面加载完毕之后,可以通过下面的方法来初始化该LightBox插件。

$(".zb").zbox();
                

zbox插件的github地址为:https://github.com/statenlogic/zbox

网友评论