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

zbox是一款带放大镜效果的jQuery LightBox图片画廊插件。该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();

在线预览   源码下载

时间: 2024-10-14 00:44:11

带放大镜效果的jQuery LightBox图片画廊插件的相关文章

jQuery和css3响应式带全屏模式的图片画廊插件

这是一款效果相当炫酷的jQuery和css3响应式带全屏模式的图片画廊插件.该图片画廊插件使用CSS3 Animations来制作动画.该响应式图片画廊插件支持移动触摸设备,支持使用键盘来导航,同时支持HTML5全屏模式API. 在线演示:http://www.htmleaf.com/Demo/201502101360.html 下载地址:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201502101359.html

十个jQuery图片画廊插件推荐

jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuery的重要性不能被忽视.下面为你介绍了10个最有美感,创新性和创造性的jQuery图片画廊插件: 1.How to Create a Simple Slideshow using Mootools / JQuery 当我们想要在有限的屏幕空间展示很多内容,这要使用到幻灯片.幻灯片是最佳的可以展现大量的信息的方式.在这篇文章中我将展示使用MooTools / Jquery做出

jQuery Lightbox图片放大预览

简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://hovertree.com/texiao/jqimg/6/ 效果图如下: 源码下载:http://hovertree.com/h/bjaf/hdhgnftp.htm HTML文件代码: <!DOCTYPE html> <html lang="zh"> <head

Html5添加制作全屏响应式效果的图片画廊插件教程

一.安装 npm install jquery-gallerybox 二.使用方法 <link rel="stylesheet" type="text/css" href="css/gallerybox.css">               <script src="js/jquery.min.js"></script> <script src="js/jquery.gal

带动画效果的jQuery手风琴

带动画效果的jQuery特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www.huiyi8.com/sc/11120.html 带动画效果的jQuery手风琴

一款简单实用的jQuery图片画廊插件

图片画廊 今天分享一个自己实现的jQuery 图片画廊插件. 看一下效果图: 点击图片时: 在线演示地址:http://www.jr93.top/photoGallery/photoGallery.html 使用 使用也是很简单,代码如下: <div id="photoGallery-container"> <img class="photoGallery" data-src="img/1-1.jpg" src="im

基于jQuery的图片画廊、lightbox插件效果

图片演示: 使用说明: 第一步:首先你要在页面中引入一下文件,注意先后顺序 <link rel="stylesheet" type="text/css" href="css/album-lightbox.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type=&

Html5添加跨浏览器的带放大镜效果的商品橱窗插件教程

一.使用方法 <link rel="stylesheet" href="css/smoothproducts.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/smoothproducts.

Gallery实现ViewPager的页面切换效果、以及实现图片画廊效果

activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"