jQuery带放大镜LightBox画廊代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery带放大镜LightBox画廊代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery带放大镜LightBox画廊代码</title>
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link type="text/css" rel="stylesheet" media="all" href="css/jquery.zbox.css" />
<style>
#wrapper { margin:30px auto; width:640px;}
#wrapper img { width:300px; height:200px; margin:10px; float:left;}
h1 { margin:30px auto; text-align:center;}
</style>
</head>
<body>
<div class="htmleaf-container">
	<h1>jQuery带放大镜LightBox画廊代码</h1>
		<div id="wrapper">
		  <a class="zb" rel="group" href="img/1.jpg" title="long">
			<img src="img/1_s.jpg"/>
		  </a>
		  <br/>
		  <a class="zb" rel="group" href="img/2.jpg" title="long">
			<img src="img/2_s.jpg"/>
		  </a>
		  <a class="zb" rel="group" href="img/3.jpg" title="long">
			<img src="img/3_s.jpg"/>
		  </a>
		  <a class="zb" rel="group" href="img/4.jpg" title="long">
			<img src="img/4_s.jpg"/>
		  </a>
		</div>
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.zbox.min.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function(){
	jQuery(".zb").zbox( { margin:40 } );
  });
</script>
</body>
</html>

JS代码(jquery.zbox.min.js):

/** * zbox - lightbox and zoomer combo for jQuery * * Copyright 2013 Arcitus Solutions Ltd. * http://www.arcitus.co.uk/ * Not to be used without permission. * * Version 1.0.0 - 26th August 2013 * * Developed for jQuery 1.8.2 * */
;
	!function(e,t,n){
	"use strict";
	var i={
	margin:10}
,r={
	c:null,o:{
}
,s:function(i){
	r.cin=r.cn.index(this),r.sd=!1,r.r=!0,e(this).blur(),e(n).on("keydown.zbox",function(e){
	27==e.which||13==e.which?(r.sdn(),e.preventDefault()):37==e.which||38==e.which||8==e.which?(r.p(),e.preventDefault()):(39==e.which||40==e.which||32==e.which)&&(r.n(),e.preventDefault())}
),e(t).resize(function(){
	r.rf(!1)}
),r.window=e(t),r.so(),r.li(),i.preventDefault()}
,so:function(){
	var t='<div id="zbox-overlay"></div>';
	r.ov=e(t).appendTo("body"),r.ov.click(r.sdn),r.ov.animate({
	opacity:.7}
,{
	duration:250,easing:"swing"}
)}
,sdn:function(){
	r.sd=!0,r.sp&&(r.sp.remove(),r.sp=null),r.c&&r.c.animate({
	opacity:.1}
,{
	duration:250,easing:"swing"}
),r.ov?r.ov.animate({
	opacity:.1}
,{
	duration:250,easing:"swing",complete:r.sdf}
):r.sdf()}
,sdf:function(){
	r.sd=!0,r.ov&&(r.ov.remove(),r.ov=null),r.c&&(r.c.remove(),r.c=null),r.sp&&(r.sp.remove(),r.sp=null),r.i=null,r.nil=0,r.ail=!1,e(".zbox-screen").unbind(".zbox"),e(n).off(".zbox")}
,li:function(){
	r.i=new Array,r.nil=0,r.ail=!1,r.cn.each(function(){
	var t=new Image;
	t.onload=function(){
	r.sd||(r.nil++,r.nil==r.cn.length&&(r.ail=!0,r.hs(),r.bi(),r.si(),r.sm()))}
,t.onerror=function(){
	console&&console.warn("Error loading image "+t.src),r.hs(),r.sdf()}
;
	var n=e(this).attr("href"),i=e(this).attr("title");
	t.src=n,r.i.push({
	img:t,href:n,title:i}
)}
),r.ail||r.ss()}
,ss:function(){
	if(!r.sd){
	var t='<div id="zbox-spinner">Loading...</div>';
	r.sp=e(t),r.sp.css("left",r.window.scrollLeft()-16+r.window.width()/2),r.sp.css("top",r.window.scrollTop()-16+r.window.height()/2),r.ail||r.sp.appendTo("body")}
}
,hs:function(){
	r.sp&&(r.sp.remove(),r.sp=null)}
,bi:function(){
	var t='<div class="zbox-content"></div>';
	r.c=e(t);
	var n=r.i[r.cin].href,i=r.i[r.cin].title,o=r.i[r.cin].img,a='<img src="'+n+'" alt="'+i+'"/>';
	r.im=e(a);
	var s=o.width,l=o.height,c=r.window.width()-2*r.o.margin,u=r.window.height()-2*r.o.margin,d=c-80,p=u-20,f=d/p,h=s/l,g=d,m=p;
	h>f?s>d?m=Math.ceil(d/h):(g=s,m=l):l>p?g=Math.ceil(p*h):(g=s,m=l),r.im.width(g),r.im.height(m),r.c.css("left",Math.ceil(r.o.margin+(c-(g+80))/2)+"px"),r.c.css("top",Math.ceil(r.o.margin+(u-(m+20))/2)+"px"),r.i.length>1&&(e('<div class="zbox-button left"></div>').css("top",Math.ceil((m+20)/2-6)+"px").appendTo(r.c).click(r.p),e('<div class="zbox-button right"></div>').css("top",Math.ceil((m+20)/2-6)+"px").appendTo(r.c).click(r.n)),e('<div class="zbox-button close"></div>').appendTo(r.c).click(r.sdn),r.d={
	iw:s,ih:l,ww:c,wh:u,nw:g,nh:m}
}
,si:function(e){
	r.im.appendTo(r.c),r.c.appendTo("body"),e?r.c.animate({
	opacity:1}
,{
	duration:250,easing:"swing",complete:function(){
	r.r=!1}
}
):(r.c.css("opacity",1),r.r=!1)}
,mon:function(){
	r.showingMag=!0,r.mag&&r.mag.css("display","block")}
,moff:function(){
	r.showingMag=!1,r.mag&&r.mag.css("display","none")}
,sm:function(){
	function t(e,t,n,i){
	var o=l.left,a=l.top,s=e-o;
	"undefined"!=typeof zoom_offset&&(s-=zoom_offset);
	var c=t-a,u=s/r.d.nw,d=c/r.d.nh,p=u*r.d.iw,f=d*r.d.ih,h=100-p,g=100-f,m=100,y=100;
	jQuery("#zbox-magnifier").css("left",n-m).css("top",i-y).css("background-position",h+"px "+g+"px")}
if(r.d.nw<r.d.iw||r.d.nh<r.d.ih){
	var n='<div id="zbox-magnifier">&nbsp;
	</div>',i=r.mag=e(n).appendTo(r.c);
	r.moff(),i.css("background-image","url("+r.i[r.cin].href+")");
	var o='<div class="zbox-screen"></div>',a=e(o).appendTo(r.c);
	a.width(r.d.nw),a.height(r.d.nh),a.css("left","40px"),a.css("top","10px"),a.css("font-size",r.d.nh+"px");
	var s=navigator.userAgent.match(/msie/i);
	s?a.css("cursor","url(blank.cur)"):a.css("cursor","none"),a.bind("mouseenter.zbox",function(e){
	t(e.pageX,e.pageY,e.clientX,e.clientY),r.mon()}
),a.bind("mouseleave.zbox",r.moff);
	var l=a.offset();
	l&&a.bind("mousemove.zbox",function(e){
	r.showingMag&&t(e.pageX,e.pageY,e.clientX,e.clientY)}
)}
}
,p:function(){
	r.r||(0==r.cin&&(r.cin=r.i.length),--r.cin,r.rf(!0))}
,n:function(){
	r.r||(++r.cin,r.cin==r.i.length&&(r.cin=0),r.rf(!0))}
,rf:function(t){
	r.r=!0,r.moff(),e(".zbox-screen").unbind(".zbox"),t?r.c.animate({
	opacity:.1}
,{
	duration:250,easing:"swing",complete:function(){
	r.c.remove(),r.bi(),r.si(!0),r.sm()}
}
):(r.c.remove(),r.bi(),r.si(!1),r.sm())}
}
;
	e.fn.zbox=function(t){
	return r.o=e.extend({
}
,i,t),r.cn=this,this.each(function(){
	e(this).click(r.s)}
)}
}
(jQuery,window,document);

CSS代码(jquery.zbox.min.css):

@charset "UTF-8";#zbox-overlay{background-color:#666;bottom:0;left:0;opacity:.1;position:fixed;right:0;top:0;z-index:800}
.zbox-content{position:absolute;z-index:801;opacity:.1;text-align:center;padding:10px 40px;background-color:#fff;border-radius:8px;font-size:0}
#zbox-magnifier{box-shadow:0 5px 5px rgba(0,0,0,1);-webkit-box-shadow:0 5px 5px rgba(0,0,0,1);-moz-box-shadow:0 5px 5px rgba(0,0,0,1);display:none;background-repeat:no-repeat;background-image:none;background-position:-1000px -1000px;z-index:802;position:fixed;left:500px;top:500px;border:1px solid #000;background-color:#fff;width:200px;height:200px;border-bottom-right-radius:100px;border-bottom-left-radius:100px;border-top-right-radius:100px;border-top-left-radius:100px;-moz-border-radius-bottomright:100px;-moz-border-radius-bottomleft:100px;-moz-border-radius-topright:100px;-moz-border-radius-topleft:100px;">}
.zbox-screen{overflow:hidden;left:0;position:absolute;top:0;z-index:803}
#zbox-spinner{left:0;position:absolute;top:0;z-index:803;width:32px;height:32px;text-indent:-9999px;background-image:url(spinner.gif);background-repeat:no-repeat}
.zbox-button{background-color:transparent;background-image:url(zbox-buttons.png);background-repeat:no-repeat;cursor:pointer;display:block;position:absolute;width:32px;height:32px}
.zbox-button.left{left:6px;top:64px;background-position:-32px 0}
.zbox-button.right{right:4px;top:64px;background-position:-64px 0}
.zbox-button.close{right:0;top:0;background-position:0 0}

附件:下载该文件资源,减少时间成本(增值服务)